tailwind-css
Use when working with Tailwind CSS for utility-first styling, responsive design, theming, or dark mode. Also use when migrating from Tailwind v3 to v4, configuring @theme directives, or troubleshooting class specificity issues.
| Model | Source |
|---|---|
| sonnet | pack: frontend |
Full Reference
┏━ 🔧 tailwind-css ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ Use when working with Tailwind CSS for utility… ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
Tailwind CSS
Section titled “Tailwind CSS”CSS-first utility framework powered by the Oxide engine (Rust). v4 replaces tailwind.config.js with @theme {} in CSS — no config file needed. Released January 22, 2025 with 3.78x faster full builds and 182x faster incremental builds.
| Item | Value |
|---|---|
| Current Version | v4.x |
| Install (Next.js) | npm install tailwindcss @tailwindcss/postcss postcss |
| Install (Vite/Astro) | npm install tailwindcss @tailwindcss/vite |
| Config | @theme {} block in your global CSS file |
| Docs | https://tailwindcss.com/docs |
| Browser support | Safari 16.4+, Chrome 111+, Firefox 128+ |
Reference Index
Section titled “Reference Index”| I want to… | File |
|---|---|
| Installing Tailwind (Next.js, Astro, Vite) | reference/install.md |
Configuring @theme, @utility, @custom-variant, @plugin, @reference | reference/config.md |
| Migrating from v3 to v4 | reference/migration.md |
| Spacing, typography, colors, layout, flexbox, grid, new v4 utilities | reference/utilities.md |
| Breakpoints, max-width variants, container queries | reference/responsive.md |
| Dark mode strategies, next-themes integration | reference/dark-mode.md |
| Typography plugin, Forms plugin, custom plugins | reference/plugins.md |
Usage: Read the reference file matching your current task from the index above. Each file is self-contained with code examples and inline gotchas.
Load only the reference docs relevant to the current task.
Quick Reference — v3 → v4 Breaking Changes
Section titled “Quick Reference — v3 → v4 Breaking Changes”| v3 | v4 |
|---|---|
@tailwind base/components/utilities | @import "tailwindcss" |
tailwindcss PostCSS plugin | @tailwindcss/postcss |
shadow / shadow-sm | shadow-sm / shadow-xs |
rounded / rounded-sm | rounded-sm / rounded-xs |
blur / blur-sm | blur-sm / blur-xs |
ring (was 3px blue) | ring-3 ring-blue-500 |
border (was gray-200) | border border-gray-200 |
outline-none | outline-hidden |
flex-shrink-0 / flex-grow | shrink-0 / grow |
bg-opacity-50 | bg-black/50 |
!flex (prefix) | flex! (suffix) |
bg-[--var] | bg-(--var) |
first:*:pt-0 | *:first:pt-0 |
@layer utilities {} | @utility {} |
resolveConfig() in JS | getComputedStyle(document.documentElement) |
@astrojs/tailwind | @tailwindcss/vite |