# Tailwindcss

> Tailwind CSS — utility-first CSS framework. Use when building with Tailwind CSS or asking about its utility classes, configuration, theming, dark mode, responsive design, custom plugins, or migration from v3 to v4. Fetch live documentation for up-to-date details.

- Skill: `mikkelkrogsholm/tailwindcss` (Agent Skill)
- Install (CLI): `npx skillmds@latest add mikkelkrogsholm/tailwindcss`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mikkelkrogsholm/tailwindcss/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: mikkelkrogsholm (https://skillmd.com/u/mikkelkrogsholm)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/mikkelkrogsholm/tailwindcss

---


# 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:
```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`.