| name | tailwind |
| description | Tailwind CSS — utility-first CSS framework with responsive prefixes, dark mode, JIT engine, and customization via config. |
core philosophy
Utility-first. Compose designs using single-purpose classes. No context switching between HTML and CSS files.
responsive & state
Prefix breakpoints: sm: md: lg: xl: 2xl:. State variants: hover: focus: active: disabled:. Group variants: group-hover: peer-invalid:. Dark mode: dark: prefix or class strategy in config.
custom theme
Edit tailwind.config.{js,ts}: extend colors, spacing, fonts, breakpoints. Use theme() function in CSS. Arbitrary values: w-[123px] bg-[#1da1f1] grid-cols-[1fr_2fr].
@apply & components
Extract repeated utility groups with @apply in CSS. Use @layer components for component classes. Avoid @apply for truly atomic patterns.
plugins
require('@tailwindcss/forms'), @tailwindcss/typography (prose), @tailwindcss/aspect-ratio, @tailwindcss/container-queries. Write custom plugins with addUtilities, addComponents, matchUtilities.
v4 changes
CSS-first config (no tailwind.config needed). @import "tailwindcss" in CSS entry. @theme directive for design tokens. Built-in container queries. Simplified dark mode. New @variant system.
JIT engine
On-demand generation. Zero unused CSS in production. Every combination is valid without config. Rebuilds in milliseconds.
best practices
Mobile-first responsive design. Use design tokens (spacing scale, color palette). Purge unused classes in production. Prefer gap over margin for layouts.
