skills.rest
raphi011
raphi011COMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind-css

Configure Tailwind CSS v4 with CSS-native `@theme` tokens and variant directives.

Updated Aug 27, 2026
Search Tags:#frontend#design system#css#styling#tailwind#v4
One-click install
npx skills add https://github.com/raphi011/skills --skill tailwind-css-raphi011
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-css
Source: https://github.com/raphi011/skills/tree/main/skills/tailwind-css
Command: npx skills add https://github.com/raphi011/skills --skill tailwind-css-raphi011

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you leverage the new CSS-native configuration of Tailwind CSS v4, simplifying setup and enabling powerful styling patterns.

Core Features & Use Cases

  • CSS-Native Configuration: Set up Tailwind v4 without tailwind.config.js.
  • Design Tokens: Define semantic colors, spacing, and typography using @theme.
  • Dark Mode: Implement class-based dark mode with @variant dark.
  • Migration: Understand the differences and migration path from Tailwind v3.
  • Use Case: You're starting a new project with Tailwind v4 and need to set up your design system tokens for colors and dark mode, and understand how to structure your CSS input file.

Quick Start

Configure Tailwind CSS v4 by adding @import "tailwindcss"; to your input CSS file.

Frequently Asked Questions about tailwind-css

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

FAQPage Schema
How do I configure Tailwind CSS v4 without tailwind.config.js?▼

Tailwind CSS v4 configuration is CSS-native, allowing you to add `@import "tailwindcss";` to your input CSS file. This eliminates the need for a JavaScript configuration file, streamlining your design system setup process.

How do I set up semantic color tokens in Tailwind v4?▼

Semantic color tokens in Tailwind v4 are set up using the `@theme` directive. This approach allows you to define design tokens for semantic colors, spacing, and typography directly within your CSS file using custom properties.

What is the best way to implement dark mode in Tailwind CSS v4?▼

Implementing dark mode in Tailwind CSS v4 uses the `@variant dark` directive. This CSS-native approach allows you to apply class-based dark mode styling directly within your stylesheet alongside your design tokens.

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

Migrating from Tailwind CSS v3 to v4 involves adopting the new CSS-native configuration and directive syntax. You will replace your JavaScript configuration file with CSS custom properties and directives like `@theme` for design tokens.

Do I need to understand CSS custom properties to use Tailwind v4?▼

Yes, understanding CSS custom properties is required to use Tailwind v4. The new CSS-native configuration relies heavily on custom properties and new directive syntax for setting up design system tokens and variants.

Related Skills

Explore More Software Engineering Skills→
wyattowalshwyattowalsh
4

frontend-designer

Design, scaffold, refactor, and audit React frontend codebases with Tailwind CSS v4 and shadcn/ui.

Community
Advanced
7a336e6e7a336e6e
1

generating-css

Generate production-ready CSS from design tokens for Tailwind CSS or vanilla CSS.

Community
Intermediate
spencerpaulyspencerpauly
672

converting-css-to-tailwind

Convert plain CSS stylesheets into Tailwind utility classes in markup.

Community
Intermediate
hakushunhakushun

tailwind-design-system

Creates scalable design systems with Tailwind CSS v4 and semantic tokens.

Community
Advanced