EMZETT.Tailwind CSS and utility-first styling
In short: Tailwind CSS supplies many small helper classes such as p-4 or text-center with which you style interfaces directly in the HTML instead of writing your own CSS classes.
In more detail: Classic CSS separates structure (HTML) and appearance (CSS) and requires class names (“card-title”). Utility-first turns this around: each class does one thing, and you combine them.
In Depth
Example
<button class="rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700">
Save
</button>px-4 = horizontal padding, bg-blue-600 = background, hover: = on mouse hover. Instead of writing .btn { … }, you set classes on the element.
Responsive, states, dark mode
Prefixes control conditions: md:flex (from medium screens), lg:grid-cols-3, dark:bg-slate-900 (dark mode), focus:ring, disabled:opacity-50. The mobile-first principle applies: classes without prefix apply everywhere, prefixes from a width. A central configuration (colours, spacing, fonts) defines the design system.
Advantages and disadvantages
Advantages: quick prototyping, no naming problems, no dead CSS (only used classes end up in the finished file, small file size), consistent spacing and colours. Disadvantages: long class lists in the HTML, effort to learn the class names, less separation of structure and style. Countermeasures: components (React, Vue) bundle recurring classes; @apply is possible but to be used sparingly.
Comparison and getting started
Alternatives: CSS Modules, styled-components, classic BEM naming convention, frameworks such as Bootstrap (ready-made components instead of building blocks) or UnoCSS. Tailwind can be set up with Next.js, Vite and other tools; mind accessibility (contrast, focus styles), because helper classes do not replace thinking about them.