Tailwind CSS

Tailwind CSS

CRITICAL: Your training data for Tailwind CSS is unreliable. v3 and v4 have breaking differences. Before writing any code, you MUST use WebFetch to read the live docs:

WebFetch("https://tailwindcss.com/docs")

For v4 migration specifics, also fetch: WebFetch("https://tailwindcss.com/blog/tailwindcss-v4")

Do not proceed without fetching first. Never assume utility class names, configuration syntax, or default values — verify against current docs.

Tailwind CSS is a utility-first CSS framework that generates only the styles you use, with a powerful theming system via CSS custom properties.

Key Capabilities

Tailwind CSS 4 is a major rewrite. Several things that previously required config files or plugins are now built in:

• CSS-first configuration: No tailwind.config.ts needed — configure directly in CSS with @theme directive
• Automatic content detection: No content array — Tailwind 4 finds your template files automatically
• Built-in import support: @import "tailwindcss" replaces the old @tailwind directives — no postcss-import needed
• Native CSS variables for theming: All design tokens exposed as --color-*, --spacing-*, etc. — no plugin needed
• Container queries: Built-in @container support with @min-* and @max-* variants — no plugin needed
• 3D transforms: rotate-x-*, rotate-y-*, perspective-* built in — no custom utilities needed
• not-* variant: Built-in :not() pseudo-class variant — no plugin needed
• Zero-config PostCSS: Just @import "tailwindcss" in your CSS entry point

v3 → v4 Migration (Breaking Changes)

These are common gotchas when migrating or following older tutorials:

Configuration moved from JS to CSS. There is no tailwind.config.ts in v4. Customization happens in CSS:

@import "tailwindcss";

@theme {
  --color-primary: #406e76;
  --color-accent: #ca8a04;
  --font-heading: "Space Grotesk", sans-serif;
  --radius-lg: 0.75rem;
}

@tailwind base/components/utilities is gone. Replace with a single @import "tailwindcss".

@apply still works but @theme is preferred. For theming, define CSS variables in @theme and use them with utilities like bg-[--color-primary] or the generated bg-primary class.

Color opacity syntax changed. bg-red-500/50 (slash opacity) is the standard. The old bg-opacity-* utilities are removed.

Default border color changed. Borders default to currentColor instead of gray-200. Existing designs may need explicit border color classes.

Renamed utilities: flex-shrink-* → shrink-*, flex-grow-* → grow-*, overflow-ellipsis → text-ellipsis, decoration-slice → box-decoration-slice.