Tailwind CSS

The traditional way is to come up with a class name, then write its styles in a CSS file. Tailwind gives you tons of ready-made small class names, each doing one thing: p-4 is 16px padding, text-gray-500 is gray text, rounded-lg is an 8px radius, md:grid-cols-3 is three columns on medium screens and up, and hover:bg-gray-100 lightens the background on hover.

AI coding tools use Tailwind a lot when generating frontend code, and popular component libraries like shadcn/ui are built on it. Once you can read the common class names, you can edit AI-generated styles directly, and use class names to communicate precisely, like "change gap-2 to gap-4."

Colors, spacing, and breakpoints can be defined in one place in the theme config, which works as the project's design tokens. Config works very differently in v3 and v4, so before letting AI change it, confirm which version your project uses.