Tailwind CSS
Utility-first CSS framework enabling design building directly in markup using atomic classes, eliminating the need to write custom CSS.
seed#tailwind#css#utility-first#frontend#styling#responsive
What it is
Tailwind CSS is a utility-first CSS framework. Instead of writing semantic classes and custom CSS, you compose designs using atomic classes directly in HTML: flex, p-4, text-lg, bg-blue-500.
Why Tailwind?
| CSS approach | Example | Advantage | Disadvantage |
|---|---|---|---|
| Traditional CSS | .card-header { ... } | Full control, semantic | Grows unbounded, naming is hard |
| CSS Modules | styles.cardHeader | Scoped by default | One file per component |
| CSS-in-JS | styled(Component) | Dynamic, co-located | Runtime overhead, bundle size |
| Tailwind | class="flex p-4 rounded" | No naming, automatic purge | Long classes in markup |
Specific benefits:
- CSS doesn't grow with the project (unused class purging)
- Consistency through design tokens
- Responsive and dark mode with prefixes (
md:,dark:) - Productivity: design without switching files
Tailwind v4
Version 4 introduces:
- CSS-first configuration (no more
tailwind.config.js) - Native custom properties
- Improved performance
- Composable variants
This site uses Tailwind
jonmatum.com uses Tailwind CSS v4 with custom properties for colors (--color-bg, --color-fg, etc.) and dark mode only.
Why it matters
Tailwind CSS changed the way styles are written by eliminating the abstraction of semantic classes. Utility classes allow building interfaces directly in markup, with a consistent design system and minimal CSS bundle thanks to automatic tree-shaking.
References
- Tailwind CSS Documentation — Official documentation.
- Tailwind CSS Blog — Tailwind Labs, 2024. Announcements and updates.
- Tailwind CSS — GitHub — Tailwind Labs, 2024. Source code and discussions.