skills.rest
suwandre
suwandreCOMMUNITY
Explore all skills by this author →
Website𝕏@jdogelsGitHub

tailwind-v4-configuration

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Configuring Tailwind CSS v4 with a CSS-first workflow can be complex when migrating from v3 or setting up across different toolchains; this skill provides a clear, self-contained path to get started and stay aligned with best practices.

Core Features & Use Cases

  • CSS-first Tailwind v4 configuration using the @theme directive to define tokens, breakpoints, and design systems.
  • Guidance for installation with Vite, PostCSS, or standalone CLI, plus framework-specific setup (Next.js, React, Vue, SvelteKit).
  • Migration assistance from v3 to v4, including content path considerations and plugin usage for common environments.

Quick Start

Install Tailwind v4 in your project and start using the CSS-first configuration with the @theme directive to define core design tokens.

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 CSS from v3 to v4 using a CSS-first configuration?▼

Configuring Tailwind v4 with Vite or PostCSS requires installing the appropriate plugin and switching to a CSS-first workflow. This skill provides framework-specific setup instructions for Vite, PostCSS, and standalone CLI environments.

What is the @theme directive in Tailwind v4 and how does it work?▼

The @theme directive in Tailwind v4 replaces the JavaScript configuration file, allowing you to define design tokens, breakpoints, and design systems directly in CSS. It centralizes theme customization within your stylesheet using a CSS-first approach.

Can I use Tailwind v4 with Next.js, React, Vue, and SvelteKit?▼

Yes, Tailwind v4 supports framework-specific setups for Next.js, React, Vue, and SvelteKit. This skill offers installation guidance and configuration steps tailored to these environments using Vite or PostCSS integrations.

Do I need a tailwind.config.js file for Tailwind v4 setup?▼

No, Tailwind v4 eliminates the need for a traditional JavaScript configuration file by using a CSS-first setup. You define design tokens and plugin configurations directly within your CSS using the @theme directive.

Why is my Tailwind v4 PostCSS configuration not working after migration?▼

Tailwind v4 PostCSS configuration issues after migration often stem from outdated content paths or missing plugin updates. This skill outlines necessary v3 to v4 migration adjustments, including content path considerations and proper plugin usage.

Related Skills

Explore More Software Engineering Skills→
Yoriichi-DangYoriichi-Dang

tailwind-v4-shadcn

Migrate React projects to Tailwind v4 with shadcn/ui using CSS-first theming.

Community
Advanced
Chris-MaskeyChris-Maskey

tailwind-v4-configuration

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

Community
Intermediate
djankiesdjankies

configuring-tailwind-v4

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

Community
Advanced
Impertio-StudioImpertio-Studio

tailwind-impl-build-postcss-cli

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

Official
Intermediate