Tailwind CSS

A utility-first CSS framework: you style elements by combining small, single-purpose classes directly in markup.

Notes

Classes like px-4, text-sm, and bg-stone-300 each do one thing. Variants like hover:, md:, and dark: handle states and breakpoints.
Tailwind scans your source files and generates CSS only for classes it finds, so the output stays small.
Never build class names dynamically (`text-${color}-400`). Tailwind can't see them and won't generate the CSS. Write complete class names in both branches of a condition.
Tailwind v4 needs no config file for basic use; the CSS import is enough.

What: Utility classes in markup instead of custom CSS.
Why: No naming, no switching files, consistent spacing and colors, tiny production CSS.
When: Most new projects in either framework.
Use case: Styling the email field with a conditional error color.

Setup (Vite):

React

npm install tailwindcss @tailwindcss/vite

Setup (PostCSS):

Angular

npm install tailwindcss @tailwindcss/postcss postcss

Tailwind classes are identical in both frameworks; only setup and binding syntax differ.
Angular's [class] binding merges with the static class attribute, which keeps base and conditional classes cleanly separated.
Long class strings: extract a component rather than using @apply everywhere.

React	Angular
`@tailwindcss/vite` plugin	`@tailwindcss/postcss` + `.postcssrc.json`
`@import 'tailwindcss'` in `index.css`	`@import 'tailwindcss'` in `styles.css`
className={`base ${cond ? 'a' : 'b'}`}	`class="base" [class]="cond ? 'a' : 'b'"`