tailwind-v4-configuration

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

1|Updated Mar 20, 2026

Search Tags:#theming #css #migration #configuration #vite #tailwind #postcss

Ready to run

npx skills add https://github.com/Thomashighbaugh/opencode --skill tailwind-v4-configuration

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tailwind-v4-configuration
Source: https://github.com/Thomashighbaugh/opencode/tree/main/skills/tailwind-v4-configuration
Command: npx skills add https://github.com/Thomashighbaugh/opencode --skill tailwind-v4-configuration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a complete, CSS-first guide to install, migrate, and configure Tailwind CSS v4 so teams can adopt the new @theme workflow, unified toolchain, and modern utilities without guesswork or trial-and-error.

Core Features & Use Cases

Installation guidance for Vite, PostCSS, and the standalone CLI with recommended plugin settings.
Migration steps and examples to convert tailwind.config.js patterns into CSS @theme tokens and resolve breaking utility changes.
Theme customization, scoped stylesheets, custom utilities, and plugin registration via @plugin for framework and multi-package setups.
Framework-specific examples for Next.js, React, Vue, and SvelteKit, plus troubleshooting and performance tips.

Quick Start

Initialize Tailwind v4 by adding a single @import tailwindcss line to your main CSS, define theme tokens in an @theme block, and install the matching build plugin for your toolchain.

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 my Tailwind CSS configuration from v3 to v4?▼

Tailwind v4 configuration uses a CSS-first approach where you add a single @import tailwindcss line to your main CSS file and define theme tokens inside an @theme block. This replaces the traditional JavaScript configuration file with native CSS variables.

How do I set up Tailwind v4 with Vite or PostCSS?▼

Tailwind v4 introduces a CSS-first @theme workflow, automatic content detection, and unified toolchain integration. These modern utilities replace manual JavaScript configuration and content path definitions with a streamlined CSS-based approach.

How do I register plugins in Tailwind v4 without a JavaScript config file?▼

In Tailwind v4, you register plugins using the @plugin directive directly within your CSS. This CSS-first approach eliminates the need for a JavaScript configuration file while maintaining full plugin extensibility and customization capabilities.

Does Tailwind v4 support custom prefixes and important options via CSS configuration?▼

Yes, Tailwind v4 supports prefix and important options directly through its CSS-first configuration approach. You can define these settings alongside your custom utilities and scoped stylesheets without relying on a JavaScript configuration file.

Why is my Tailwind v4 migration not working after converting the config file?▼

Tailwind v4 migration issues often stem from unresolved breaking utility changes or incorrect @theme token definitions. The guide provides troubleshooting steps and performance tips to resolve framework-specific setup errors across Vite, PostCSS, and CLI installations.