Chapter 38: CSS Engine Basics in TypeScript

Tailwind-like utility classes in Rust. In this chapter, you will learn css engine basics in depth with TypeScript code examples, explanations, and best practices.

Overview

This chapter covers css engine basics for Kungfu.js developers using TypeScript. We will start with the basics, move through practical examples, and end with advanced techniques and common pitfalls.

Why This Matters

Understanding css engine basics is essential because it is a core part of building web applications. Every real-world app needs to handle tailwind-like utility classes in rust. Skipping this chapter would leave a gap in your knowledge that would cause problems later.

Code Example

Here is how the CSS engine works in TypeScript:

const { compileCss } = require('@kungfu/core');

// Compile class string to CSS
const css = compileCss('flex p-4 text-red-500 hover:bg-blue-200');
// Returns: .flex { display: flex; } .p-4 { padding: 1rem; } ...

How the CSS Engine Works

The Kungfu.js CSS engine scans your HTML/JSX/TSX files for class names. When it finds class="flex p-4", it generates CSS rules for .flex and .p-4. Unused classes are not included, keeping the CSS bundle minimal.

This is similar to Tailwind CSS, but it runs in Rust instead of Node.js, making it much faster. No PostCSS configuration, no Tailwind config file, no Node.js dependency.

Common Mistakes

  • Not reading the documentation: Always check the API reference when something does not work as expected.
  • Skipping security: Never disable the default middleware unless you have a very good reason. Security is not optional.
  • Not testing: Write tests for your handlers. Kungfu.js makes this easy with the built-in test utilities.

Summary

In this chapter, you learned about css engine basics in TypeScript. You saw code examples, understood how things work under the hood, and learned about common mistakes to avoid.

What is Next?

In chapter 39, we will cover Responsive Design: sm, md, lg, xl, 2xl prefixes explained.

Previous: WebSocket Chat AppNext: Responsive Design