tailwind-impl-config-v4

name	tailwind-impl-config-v4
description	Use when setting up or editing a Tailwind CSS v4 configuration via the CSS-first model: writing the entry stylesheet, defining design tokens in @theme, scoping content detection with @source, adding custom utilities with @utility, declaring custom variants with @custom-variant, wiring legacy JS plugins via @plugin, or fixing the Vue/Svelte/CSS-modules @apply trap with @reference. Prevents the silent-token-drop trap (defining @theme tokens without correct namespace prefix yields nothing), the lost-overrides trap (forgetting --color-*: initial before custom palette leaves old defaults active), the scoped-style breakage (@apply in Vue <style scoped> fails without @reference), the safelist miss (forgetting @source inline brace expansion for dynamic class names), and the @theme inline confusion (resolves var refs at build vs runtime). Covers every v4 directive (@import, @theme, @theme inline, @theme static, @source, @source not, @source inline, @source none, @plugin, @utility with --value/--modifier/--alpha/--spacing helpers, @variant, @custom-variant, @reference, @config, @apply, @layer), every theme namespace, custom-utility patterns, and JS-config back-compat. Keywords: tailwind v4 config, CSS-first config, @import tailwindcss, @theme, --color-*, --spacing, --font-*, --breakpoint-*, theme namespace, @theme inline, @theme static, @source, @source not, @source inline, brace expansion safelist, @source none, @plugin, @utility, @utility tab-*, --value(), --modifier(), --alpha(), --spacing(), @variant, @custom-variant, @reference, @config, @apply, @layer base, @layer components, scoped style apply, vue svelte css modules, Cannot apply unknown utility class, dynamic class names not detected, how do I add custom color tailwind v4, how to load v3 plugin in v4, where is tailwind.config.js v4, theme variables css variables, oklch colors, modern css tailwind config.
license	MIT
compatibility	Designed for Claude Code. Requires Tailwind CSS v4.0+.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

Tailwind CSS v4 CSS-First Configuration

v4 moves the entire configuration surface from JavaScript into CSS. Tokens are CSS variables in @theme. Custom utilities are CSS at-rules. Plugins, variants, and content paths all declare in CSS. The JS config file is opt-in only, via @config "./tailwind.config.js", for migration.

Companion skills :

• tailwind-impl-config-v3 : the v3 JS-config surface (tailwind.config.js)
• tailwind-core-v3-vs-v4 : v3-to-v4 differences across the API
• tailwind-impl-migration-v3-v4 : automated codemod + manual steps
• tailwind-errors-v4-migration : trap catalogue when an upgrade breaks

Quick Reference : The Minimum v4 Setup

/* src/app.css */
@import "tailwindcss";

That single line replaces every v3 setup step (no JS config, no PostCSS plugin chain, no @tailwind directives, no postcss-import, no autoprefixer). Add tokens, plugins, sources, and custom utilities below as needed.

Directive Index

Directive	Purpose	One-line example
@import "tailwindcss"	Load base, components, utilities	@import "tailwindcss";
@import "tailwindcss/preflight"	Just the reset	partial install
@import "tailwindcss/utilities"	Just the utilities	partial install
@import "tailwindcss/theme"	Just the default theme	partial install
@theme { ... }	Define design tokens as CSS variables	@theme { --color-brand: oklch(0.72 0.11 178); }
@theme inline { ... }	Resolve var refs at build, inline value	@theme inline { --font-sans: var(--font-inter); }
@theme static { ... }