Configure Tailwind CSS v4 themes using @theme directives and OKLCH colors.
npx skills add https://github.com/anderskev/beagle --skill tailwind-v4
Please help me install this Agent Skill. Skill: tailwind-v4 Source: https://github.com/anderskev/beagle/tree/main/skills/tailwind-v4 Command: npx skills add https://github.com/anderskev/beagle --skill tailwind-v4
Tailwind CSS v4 introduces a CSS-first design token approach with the @theme directive for token-based theming and dark mode strategies.
Define a color token with @theme and apply it to a utility like text- and bg- classes, then toggle dark mode.
High-intent search queries and answers about installing and using this skill.
CSS-first design tokens in Tailwind v4 use the @theme directive to define token values directly in CSS. Place @theme declarations in your CSS entry point, optionally integrate with Vite, and reference tokens via utility classes like text- and bg-. Tailwind automatically scans and applies your tokens without additional configuration.
Yes, OKLCH color support is built into Tailwind v4 design tokens. Define OKLCH values in your @theme directive and apply them to semantic CSS variables. This enables perceptually uniform color scaling and improved dark mode variants using the same color space.
Tailwind v4 supports three dark mode strategies via @theme: class-based toggling, media-query detection, and data-theme attributes. Choose based on your application's architecture, then define dark mode color tokens as CSS variables. The @theme directive handles variant generation automatically.
Use two-tier variable naming: define raw color tokens (e.g., oklch-500), then map semantic variables (e.g., surface-primary) to those tokens in your @theme directive. This separation lets you maintain consistent naming across your design system while keeping token values centralized.
No, Tailwind v4 includes zero-config content scanning when using @theme directives. The framework automatically discovers your CSS entry points and theme values, eliminating the need to manually configure content paths for token-based themes.
@theme inline mode embeds token values directly into generated CSS instead of using CSS variables. Choose inline mode for static themes or smaller projects; use default mode with CSS variables for dynamic theming and runtime dark mode switching.
alexzhang1030Configure Tailwind CSS v4 in Vite projects with CSS-first theming.
jubalmConfigure CSS variable-based theming for shadcn/ui components with Tailwind.
whimzyLiveConfigure Tailwind CSS v4 themes with CSS variables and dark mode.
javierhbrConfigure Tailwind CSS v4 with Vite and the @theme directive.
