Web Development5 min read

Tailwind CSS

Utility-first CSS framework - compose designs directly in markup using atomic classes, enforcing consistency without writing custom CSS.

Tailwind CSSCSSUtility-FirstDesign SystemFrontend

skill: Tailwind CSS category: Web Development tags: [Tailwind CSS, CSS, Utility-First, Design System, Frontend] readingTime: 5

Tailwind CSS is the fastest way to build consistent UIs without maintaining a custom CSS codebase. It works best with a design system mindset. For teams that prefer semantic CSS or CSS-in-JS, styled-components or CSS Modules are alternatives. For full component libraries consider shadcn/ui (built on Tailwind).

Workflow

Install and configure TailwindTailwind's PostCSS plugin scans your files and generates only the CSS classes you use - zero unused bytes in production.
Extend the theme for your design systemCustom tokens (colors, fonts, spacing) in tailwind.config give you brand-consistent utilities without one-off inline styles.
Use responsive and state variantsTailwind's variant prefix system handles responsive breakpoints, hover, focus, dark mode, and group/peer states - no media query files needed.
Extract components to avoid repetitionRepeating 15-class strings across 50 buttons is hard to maintain. Extract to a shared component (preferred) or @apply in CSS (last resort).
Add dark mode supportTailwind's dark: variant conditionally applies styles based on the user's OS preference or a class on <html> - no separate dark stylesheet needed.

Output Format

Consistent utility-class-driven UI with custom theme tokens and extracted components.

/* Theme tokens in tailwind.config.js */
/* Reusable components as framework components */
/* One-off styles via utility classes in markup */
/* Dark mode via dark: variant */

Examples

Input

Output

Input

Output

Edge Cases & Gotchas

Purge misses dynamic classes - Tailwind's content scanner does string matching - dynamically assembled class names like `'bg-' + color` won't be included. Use complete class strings or a safelist.
@apply in components creates dead specificity - @apply copies utility styles at build time; it can't use responsive or state variants and creates specificity fights. Prefer component-level JSX/Svelte.
Dark mode flash - class-based dark mode requires setting the class before render to avoid a flash of light mode. Store preference in localStorage and set the class synchronously in a <script> in <head>.
Tailwind conflicts with CSS resets - Tailwind's preflight resets all browser defaults. If you're adding Tailwind to an existing project, Preflight can break existing styles - disable it in config.

When to Break These Rules

Use CSS Modules when working in a legacy codebase that has its own design language and migrating class names to Tailwind is too disruptive.
Use styled-components or Emotion when runtime theming (changing CSS variables dynamically without class toggles) is a core requirement.

Reference Files

https://tailwindcss.com/docs
https://tailwindcss.com/docs/theme