skills.rest
dev-khoi
dev-khoiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind-v4-configuration

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

Updated Apr 29, 2026
Search Tags:#theming#frontend#migration#tailwind css#vite#postcss#css configuration
One-click install
npx skills add https://github.com/dev-khoi/AURA-conHack-2026 --skill tailwind-v4-configuration-dev-khoi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4-configuration
Source: https://github.com/dev-khoi/AURA-conHack-2026/tree/main/.opencode/skills/tailwind-v4-configuration
Command: npx skills add https://github.com/dev-khoi/AURA-conHack-2026 --skill tailwind-v4-configuration-dev-khoi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Tailwind CSS v4 replaces the JavaScript config file with a CSS-first approach, and developers migrating from v3 or setting up new projects face breaking changes in imports, utilities, and build tooling that this Skill explains and resolves. ## Core Features & Use Cases - Installation & Build Setup: Guides configuration with the Vite plugin, PostCSS plugin, or standalone CLI, including framework-specific setups for Next.js, React, Vue, and SvelteKit. - CSS-First Theming: Shows how to define colors, fonts, breakpoints, shadows, and animations using the @theme directive, plus custom utilities with @utility and variants with @custom-variant. - v3 to v4 Migration: Covers the automated upgrade tool and manual migration of breaking utility changes such as shadow-xs, rounded-xs, outline-hidden, and bg-linear-to-r. - Use Case: When upgrading a React project from Tailwind v3, use this Skill to convert tailwind.config.js into an @theme block, replace deprecated utility classes, and fix the PostCSS configuration. ## Quick Start Ask the assistant to set up Tailwind CSS v4 in your Vite project or to migrate your existing v3 configuration to the new CSS-first format.

Frequently Asked Questions about tailwind-v4-configuration

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

FAQPage Schema
How do I install Tailwind CSS v4 in a Vite project?▼

Install tailwindcss and @tailwindcss/vite, then add the tailwindcss() plugin to your Vite config. In your CSS file, replace the old @tailwind directives with a single @import "tailwindcss" statement.

How do I migrate from Tailwind CSS v3 to v4?▼

Run npx @tailwindcss/upgrade to automate dependency updates, config migration, and template fixes. Manually, move tailwind.config.js theme values into a CSS @theme block and update renamed utilities like shadow-xs and rounded-xs.

Does Tailwind v4 still use tailwind.config.js?▼

No, v4 uses CSS-first configuration with the @theme directive instead of a JavaScript config file. You can still load a legacy config with the @config directive if needed during migration.

Why are my Tailwind v4 classes not being generated?▼

v4 uses automatic content detection that respects .gitignore, so excluded files are skipped. If detection fails, disable it with @import "tailwindcss" source(none) and register paths explicitly using @source directives.

What browsers does Tailwind CSS v4 support?▼

Tailwind v4 targets modern browsers: Chrome and Edge 111+, Firefox 128+, and Safari 16.4+. It relies on modern CSS features like oklch() colors and native nesting, so older browsers are not supported.

Related Skills

Explore More Software Engineering Skills→
eminboydakeminboydak

daisyui-install

Installs and configures daisyUI 5 with Tailwind CSS 4 across frameworks and CDN setups.

Community
Basic
aashahinaashahin

tailwind-design-system

Build component libraries and design tokens with Tailwind CSS v4 CSS-first configuration.

Community
Intermediate
chrismccoychrismccoy
2

page-tailwindify

Rebuilds live webpages into semantic Tailwind utility classes preserving original appearance.

Community
Advanced
mymx2mymx2
4

unocss

Configure UnoCSS atomic CSS engine with presets and custom rules.

Community
Advanced