What is Tailwind?

A Utility-First CSS Framework

Tailwind CSS is a utility-first CSS framework that provides low-level, single-purpose, composable utility classes to build designs directly in your markup.

No context-switching. No naming things. No growing stylesheets.

Pros

Context Switching

You write HTML, jump to a CSS file, write a rule, jump back. Every change lives in two places.

Naming Things Is Hard

What do you call the highlighted card? .featured? .card--active? .highlight-wrapper? You decide—forever.

CSS Bloat

Old rules never safely delete. Stylesheets grow. Nobody knows what's still in use.

Cons

Class Soup

HTML can become visually noisy because styling is done directly in the markup.

Utility Memorization

Developers need to memorize utility classes or rely on documentation.

Tool Dependency

Adds complexity and dependency on build tools.

Tailwind at Work

Semantic CSS

The class name hides the implementation.

.btn

Utility-First Tailwind

Every style is visible inline.

bg-cyan-500 dark:bg-cyan-600 text-white font-semibold text-sm 3xl:text-xl px-5 py-3 rounded-lg 3xl:px-8 3xl:py-4

Semantic CSS

Card Component

The same component would require you to coin these class names:

.card-header .card-title .card-highlighted

Utility-First Tailwind

Card Component

This card's entire visual style is declared right here in its class list. No separate stylesheet needed.

bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-6 shadow-sm 3xl:p-10 4xl:p-14