Tailwind CSS
Utility-first CSS framework enabling design building directly in markup using atomic classes, eliminating the need to write custom CSS.
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.
Related content
- React
JavaScript library for building user interfaces through declarative, reusable components, with an ecosystem spanning from SPAs to full-stack applications with Server Components.
- Design Systems
Collection of reusable components, patterns, and guidelines ensuring visual and interaction consistency in digital products at scale.
- Next.js
React framework for full-stack web applications with Server Components, file-based routing, SSR/SSG, and built-in performance optimizations.
- Building a Second Brain in Public
Chronicle of building a second brain with a knowledge graph, bilingual pipeline, and agent endpoints — in days, not weeks, and what that teaches about the gap between theory and working systems.