skills.rest
VKirill
VKirillCOMMUNITY
Explore all skills by this author →
GitHub

tailwind

Configure Tailwind CSS 4 with CSS-first tokens and modern variants.

15|2|Updated May 23, 2026
Search Tags:#dark mode#shadcn ui#variants#container queries#tailwind css 4#css-first configuration#oklch tokens
One-click install
npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill tailwind-vkirill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind
Source: https://github.com/VKirill/antigravity-for-claude-code/tree/main/skills/tailwind
Command: npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill tailwind-vkirill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Tailwind 4 projects are hard to set up and customize when you keep reaching for Tailwind 3 patterns like tailwind.config.js and plugin-style utilities. This Skill solves the confusion by guiding you through Tailwind 4’s CSS-first workflow, modern variant system, and token-driven theming so your styling stays consistent and maintainable.

Core Features & Use Cases

  • CSS-first configuration (Tailwind 4): Use @import "tailwindcss" and define tokens in @theme instead of using tailwind.config.js, covering setup for Vite and PostCSS pipelines.
  • Design tokens with oklch + semantic theming: Create brand palettes and map them into semantic tokens for robust light/dark switching (e.g., background/foreground, ring, primary).
  • Modern Tailwind 4 variants + container queries: Apply has-/not-/starting: variants and build component-level responsiveness using native @container and @sm:/@lg: prefixes.
  • React/shadcn integration patterns: Use clsx + tailwind-merge for cn(), integrate with shadcn/ui, and structure classes to avoid dynamic scanning pitfalls.

Quick Start

Configure Tailwind 4 in a Vite React project using @import "tailwindcss", define your colors and radius in @theme with oklch, and enable dark mode via @custom-variant dark (&:where(.dark, .dark *)).

Frequently Asked Questions about tailwind

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

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

To configure Tailwind CSS 4 without tailwind.config.js, use the CSS-first workflow by adding @import "tailwindcss" to your main stylesheet and defining your design tokens inside the @theme block. This replaces the legacy JavaScript configuration pattern with native CSS.

What is the best way to set up dark mode in Tailwind CSS 4?▼

The best way to set up dark mode in Tailwind CSS 4 is using the @custom-variant directive, such as @custom-variant dark (&:where(.dark, .dark *)). This strategy pairs with oklch semantic tokens mapped in your @theme block for robust light and dark switching.

Can I use Tailwind CSS 4 with React and shadcn/ui components?▼

Yes, Tailwind CSS 4 works with React and shadcn/ui by utilizing clsx and tailwind-merge to build a cn() utility function. You must structure your classes correctly to avoid dynamic scanning pitfalls and ensure proper component composition.

How do I create responsive components with container queries in Tailwind CSS 4?▼

To create responsive components with container queries in Tailwind CSS 4, use the native @container directive and apply responsive prefixes like @sm: or @lg: directly in your markup. This enables component-level responsiveness independent of the viewport.

Does Tailwind CSS 4 support Vite and PostCSS pipelines?▼

Yes, Tailwind CSS 4 supports both Vite and legacy PostCSS pipelines for project setup. You can integrate the CSS-first configuration approach seamlessly across these build tools by importing the framework directly in your CSS entry point.

How do modern variants like has-* and not-* work in Tailwind CSS 4?▼

Modern variants like has-*, not-*, and starting: in Tailwind CSS 4 are applied directly as utility prefixes in your markup. They are defined and customized using the @custom-variant directive, extending styling capabilities without external plugins.

Related Skills

Explore More Design & Creative Skills→
Impertio-StudioImpertio-Studio

tailwind-impl-build-postcss-cli

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

Official
Intermediate
jubalmjubalm
1

shadcn/ui Component Management

Add, list, view, and search shadcn/ui components via CLI commands.

Community
Intermediate
Impertio-StudioImpertio-Studio

shadcn-errors-styling-conflicts

Diagnose shadcn className overrides for Tailwind utility conflicts and merge-order errors.

Official
Intermediate
Hamza123545Hamza123545

tailwind-css

Configure Tailwind CSS with PostCSS and @tailwind directives for React projects.

Community
Intermediate