tailwind

name	tailwind
description	"Tailwind CSS 4.3 — CSS-first config via @theme, oklch colors, container queries, @utility/@variant, has-*/not-*/starting: variants, 3D transforms, dark mode. Use when: tailwind, tailwindcss, tailwind 4, @theme, @utility, @variant, oklch, container queries, dark mode, prose, tailwind-merge, cn() helper, postcss config. SKIP: Tailwind 3 config.js (→@theme in CSS), CSS-in-JS (styled-components)."

🎯 Version Requirements (May 2026)

Primary pins:

• Tailwind CSS: 4.3.x

Source of truth: STACK_VERSIONS.md — verified 2026-05-16

Usage

Loaded automatically when its description matches the active task. Read only the section you need, then follow the link to the relevant reference file for full detail.

Use this skill when

• Configuring Tailwind CSS 4 via the CSS-first @theme directive (no more tailwind.config.js)
• Setting up the Vite plugin (@tailwindcss/vite) or PostCSS plugin (@tailwindcss/postcss)
• Defining custom design tokens: colors, fonts, spacing, radius, shadows with @theme
• Working with oklch color space for brand palettes (brand-50 through brand-900)
• Building container-query layouts with @container and @container/{name}
• Writing custom utilities with @utility or custom variants with @variant
• Using modern pseudo-class variants: has-*, not-*, group-has-*, starting:
• Implementing CSS-driven dark mode (:root / .dark class / )