Tailwind CSS

Tailwind CSS is a CSS framework that provides thousands of small utility classes (like "text-lg", "bg-blue-500", "flex", "gap-4") that you combine directly in your HTML or JSX to style elements. Instead of writing custom CSS files, you compose styles inline.

Tailwind is dominant in AI-generated code because its class names are descriptive and self-documenting. When you tell the AI "make a card with rounded corners, a shadow, and padding," it produces "rounded-lg shadow-md p-6" without needing to create or reference a separate CSS file. This makes AI-generated UI code more predictable and easier to modify.

The trade-off: HTML can look cluttered with many classes. In practice, components keep this manageable because each component encapsulates its own styling. Tailwind pairs especially well with React and Next.js, and is the styling system used throughout Modern Vibe Coding.