skills.rest
Chris-Maskey
Chris-MaskeyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind-v4-configuration

Configure Tailwind CSS v4 projects with the CSS-first @theme system.

Updated Apr 17, 2026
Search Tags:#theming#migration#vite#tailwind#tailwindcss#css-first#postcss
One-click install
npx skills add https://github.com/Chris-Maskey/opencode-config --skill tailwind-v4-configuration-chris-maskey
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4-configuration
Source: https://github.com/Chris-Maskey/opencode-config/tree/main/skills/tailwind-v4-configuration
Command: npx skills add https://github.com/Chris-Maskey/opencode-config --skill tailwind-v4-configuration-chris-maskey

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Simplifies installing, migrating, and configuring Tailwind CSS v4 by consolidating the CSS-first @theme workflow, build tool integration, plugin migration, and troubleshooting into a single, practical reference.

Core Features & Use Cases

  • CSS-first configuration: Move configuration from JavaScript files into an @theme block in your stylesheet for easier theming and runtime variables.
  • Migration guidance: Clear steps for converting tailwind.config.js and v3 conventions to v4, including utility and variant changes.
  • Build tool integration: Setup examples for Vite, PostCSS, and the standalone CLI, plus framework-specific guidance for Next.js, React, Vue, and SvelteKit.
  • Custom theming & utilities: Define design tokens, custom utilities, variants, and plugin registration using @theme, @utility, and @plugin directives.
  • Performance & compatibility: Recommendations for Lightning CSS integration, automatic content detection, and modern color space usage (oklch).

Quick Start

Add @import "tailwindcss" to your main stylesheet and create an @theme block with your tokens, then enable the appropriate Vite or PostCSS plugin to build Tailwind v4.

Frequently Asked Questions about tailwind-v4-configuration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate tailwind.config.js from Tailwind CSS v3 to v4?▼

To migrate Tailwind CSS v3 to v4, convert your tailwind.config.js settings into a CSS-first @theme block in your stylesheet, update utility and variant conventions, and register plugins using the @plugin directive.

How do I configure Tailwind CSS v4 with Vite and PostCSS?▼

Configure Tailwind CSS v4 with Vite or PostCSS by adding @import "tailwindcss" to your main stylesheet, defining your @theme tokens, and enabling the appropriate build plugin to integrate the LightningCSS pipeline.

What is the CSS-first @theme system in Tailwind v4?▼

The CSS-first @theme system in Tailwind v4 moves configuration from JavaScript files directly into your stylesheet using the @theme block, enabling easier theming, runtime variables, and custom design token definitions.

Does Tailwind CSS v4 support framework setups for Next.js, React, Vue, and SvelteKit?▼

Tailwind CSS v4 supports framework setups for Next.js, React, Vue, and SvelteKit by providing specific build tool integration examples for Vite, PostCSS, and the standalone CLI to ensure proper automatic content detection.

How do I register custom plugins and utilities in Tailwind v4 without JavaScript config?▼

Register custom plugins and utilities in Tailwind v4 without JavaScript config by using the new @plugin and @utility directives directly within your CSS stylesheet alongside your @theme block.

Why use oklch colors and LightningCSS in Tailwind CSS v4?▼

Use oklch colors and LightningCSS in Tailwind CSS v4 to achieve modern color space usage and optimized build performance, replacing older PostCSS workflows with an integrated, faster CSS engine.

Related Skills

Explore More Software Engineering Skills→
Impertio-StudioImpertio-Studio

tailwind-impl-build-postcss-cli

Integrate Tailwind CSS into non-Vite build systems via PostCSS or standalone CLI.

Official
Intermediate
Hamza123545Hamza123545

tailwind-css

Configure Tailwind CSS with PostCSS and @tailwind directives for React projects.

Community
Intermediate
ThomashighbaughThomashighbaugh
1

tailwind-v4-configuration

Configure Tailwind v4 projects using CSS-first @theme and build tool integrations.

Community
Intermediate
genfeedaigenfeedai
2

tailwind

Apply Tailwind CSS v4 best practices to reduce CSS size and build performance.

Official
Advanced