skills.rest
HadiCherkaoui
HadiCherkaouiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwindcss-v4

Outline CSS-first configuration and migration steps for Tailwind CSS v4.

Updated Apr 16, 2026
Search Tags:#css#migration#theme#tailwind#tailwindcss#variants#directives
One-click install
npx skills add https://github.com/HadiCherkaoui/opencode-config --skill tailwindcss-v4-hadicherkaoui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwindcss-v4
Source: https://github.com/HadiCherkaoui/opencode-config/tree/main/skills/tailwindcss-v4
Command: npx skills add https://github.com/HadiCherkaoui/opencode-config --skill tailwindcss-v4-hadicherkaoui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind CSS v4 introduces new patterns and directives that can be confusing when migrating from v3; this Skill provides a concise reference and practical guidance to adopt CSS-first configuration, new directives, and migration steps.

Core Features & Use Cases

  • Clear explanation of v4 changes: CSS-first configuration, new directives (@theme, @utility, @variant), and migration steps from v3.
  • Quick-reference snippets and practical migration guidelines for real-world Tailwind projects.
  • Use Case: when upgrading from a v3 project to v4, use this Skill to map old concepts to v4 equivalents and validate config.

Quick Start

Summarize the v4 migration steps for a Tailwind project and generate a minimal v4-friendly config snippet.

Frequently Asked Questions about tailwindcss-v4

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

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

Tailwind CSS v4 migration requires moving to CSS-first configuration by replacing your JavaScript config with new directives like @theme, @utility, and @variant to style your project.

What is CSS-first configuration in Tailwind CSS v4?▼

CSS-first configuration in Tailwind CSS v4 defines your theme directly in CSS using the @theme directive instead of a JavaScript config file, allowing you to establish design tokens and variants natively.

How do I use @theme, @utility, and @variant directives in Tailwind?▼

You use @theme to define custom CSS variables for design tokens, @utility to create custom utility classes, and @variant to configure responsive or state modifiers directly within your CSS files.

Can I start a new project directly with Tailwind v4 patterns?▼

Yes, you can start new projects with Tailwind v4 by applying CSS-first configuration from the beginning, utilizing quick-reference snippets to generate a minimal v4-friendly config setup without needing a v3 migration path.

What are the limitations of migrating Tailwind configuration to CSS?▼

Migrating Tailwind configuration to CSS requires learning new directive syntax like @theme and @variant, and mapping old v3 JavaScript config concepts to their v4 equivalents, which may initially confuse teams unfamiliar with CSS-first patterns.

Related Skills

Explore More Software Engineering Skills→
jezwebjezweb
961

tailwind-v4-shadcn

Automate Tailwind v4 and shadcn/ui setup in Vite React projects.

Community
Intermediate
TavokAITavokAI

tailwind-design-system

Create scalable design systems with Tailwind CSS v4 using CSS-first configuration.

Official
Advanced
djankiesdjankies

configuring-tailwind-v4

Configure Tailwind CSS v4 with CSS-first @import and @theme directives.

Community
Advanced
the-perfect-developerthe-perfect-developer
11

tailwind-css

Apply utility-first CSS classes to build responsive UI layouts.

Community
Intermediate