Skip to main content
affpapa.org
RU EN
skill CX Codex

tailwind — Claude Code skill: Tailwind CSS v4 rules

A skill with 42 rules for Tailwind CSS v4: build setup, CSS generation, bundle size, theming. Useful for migrations and config work.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add PyModel/react-frontend-skills --skill tailwind -a claude-code
Open on GitHub

What tailwind does

The skill splits Tailwind CSS v4 work into 42 rules across 8 categories, ordered by impact. The first two are critical: build configuration and CSS generation. Then come bundle optimization, utility patterns, component architecture, theming, responsive design and animation. Each rule carries a prefix (build-, gen-, bundle-, util-, comp-, theme-, resp-, anim-) and lives in references/<rule-id>.md, with the reasoning plus incorrect and correct code samples.

Before you start, the skill asks you to run two commands in the project root. The first compares installed and targeted versions, the second finds deprecated APIs and prints rule IDs: npx -y @pymodel/react-frontend-skills detect and npx -y @pymodel/react-frontend-skills scan --skill tailwind. You then open the matching files under references/ by those IDs.

The rules cover the v4 CSS-first approach, the @theme directive, container queries, OKLCH colors and logical properties for RTL. The upgrade tool needs Node.js 20+. If your project still runs Sass or Less, the preprocessor rules won't apply — v4 advises dropping them.

What it helps with

  • migrate a project from the old Tailwind config to the v4 CSS-first approach
  • surface deprecated utilities and APIs after an upgrade
  • switch the build from PostCSS to the Vite plugin
  • shrink the production CSS bundle
  • define a theme through the @theme directive and semantic tokens

Example prompts for the agent

  • Run scan --skill tailwind and list which rules my styles break
  • Rewrite this component following gen-css-first-config and theme-semantic-tokens
  • Check my Tailwind build config against the build- rules

How to install tailwind

1Skills CLI (Vercel)

npx skills add PyModel/react-frontend-skills --skill tailwind -a claude-code

2Manually: put the files in place

~/.claude/skills/tailwind/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/tailwind/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about tailwind

How do I install tailwind in Claude?

Run npx skills add PyModel/react-frontend-skills --skill tailwind -a claude-code. The skill lands in ~/.claude/skills/tailwind/SKILL.md.

What does the tailwind skill do?

It gives the agent 42 Tailwind CSS v4 rules across 8 categories: build, CSS generation, bundle, utilities, components, theming, responsive and animation. Rules are sorted by impact, each with a file of code examples.

What do I need before using it?

In the project root, run npx -y @pymodel/react-frontend-skills detect and npx -y @pymodel/react-frontend-skills scan --skill tailwind. The upgrade tool requires Node.js 20+.

Source text

SKILL.md · MIT 
---
name: tailwind
description: Tailwind CSS v4 styling and configuration.
---

# Tailwind Labs Tailwind CSS v4 Best Practices

Comprehensive performance optimization guide for Tailwind CSS v4 applications, maintained by Tailwind Labs. Contains 42 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

## When to Apply

Reference these guidelines when:
- Configuring Tailwind CSS v4 build tooling (Vite plugin, PostCSS, CLI)
- Writing or migrating styles using v4's CSS-first approach
- Optimizing CSS bundle size and build performance
- Implementing responsive designs with breakpoints or container queries
- Setting up theming with @theme directive and design tokens

## Rule Categories by Priority

| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Build Configuration | CRITICAL | `build-` |
| 2 | CSS Generation | CRITICAL | `gen-` |
| 3 | Bundle Optimization | HIGH | `bundle-` |
| 4 | Utility Patterns | HIGH | `util-` |
| 5 | Component Architecture | MEDIUM-HIGH | `comp-` |
| 6 | Theming & Design Tokens | MEDIUM | `theme-` |
| 7 | Responsive & Adaptive | MEDIUM | `resp-` |
| 8 | Animation & Transitions | LOW-MEDIUM | `anim-` |

## Quick Reference

### 1. Build Configuration (CRITICAL)

- [`build-vite-plugin`](references/build-vite-plugin.md) - Use Vite Plugin Over PostCSS
- [`build-css-import`](references/build-css-import.md) - Use CSS Import Over @tailwind Directives
- [`build-content-detection`](references/build-content-detection.md) - Leverage Automatic Content Detection
- [`build-node-version`](references/build-node-version.md) - Use Node.js 20+ for the upgrade tool
- [`build-postcss-simplify`](references/build-postcss-simplify.md) - Remove Redundant PostCSS Plugins
- [`build-cli-package`](references/build-cli-package.md) - Use Correct CLI Package

### 2. CSS Generation (CRITICAL)

- [`gen-css-first-config`](references/gen-css-first-config.md) - Use CSS-First Configuration Over JavaScript
- [`gen-avoid-theme-bloat`](references/gen-avoid-theme-bloat.md) - Avoid Excessive Theme Variables
- [`gen-oklch-colors`](references/gen-oklch-colors.md) - Use OKLCH Color Space for Vivid Colors
- [`gen-utility-directive`](references/gen-utility-directive.md) - Use @utility for Custom Utilities
- [`gen-dynamic-utilities`](references/gen-dynamic-utilities.md) - Use Dynamic Utility Values
- [`gen-css-variable-syntax`](references/gen-css-variable-syntax.md) - Use Parentheses for CSS Variable References

### 3. Bundle Optimization (HIGH)

- [`bundle-remove-unused-plugins`](references/bundle-remove-unused-plugins.md) - Remove Built-in Plugins
- [`bundle-avoid-preprocessors`](references/bundle-avoid-preprocessors.md) - Avoid Sass/Less Preprocessors
- [`bundle-css-minification`](references/bundle-css-minification.md) - Enable CSS Minification in Production
- [`bundle-avoid-cdn-production`](references/bundle-avoid-cdn-production.md) - Avoid Play CDN in Production
- [`bundle-split-critical-css`](references/bundle-split-critical-css.md) - Extract Critical CSS for Initial Render

### 4. Utility Patterns (HIGH)

- [`util-renamed-utilities`](references/util-renamed-utilities.md) - Use Renamed Utility Classes
- [`util-important-modifier`](references/util-important-modifier.md) - Use Trailing Important Modifier
- [`util-variant-stacking`](references/util-variant-stacking.md) - Use Left-to-Right Variant Stacking
- [`util-explicit-colors`](references/util-explicit-colors.md) - Use Explicit Border and Ring Colors
- [`util-opacity-modifier`](references/util-opacity-modifier.md) - Use Slash Opacity Modifier
- [`util-gradient-via-none`](references/util-gradient-via-none.md) - Use via-none to Reset Gradient Stops

### 5. Component Architecture (MEDIUM-HIGH)

- [`comp-avoid-apply-overuse`](references/comp-avoid-apply-overuse.md) - Avoid Overusing @apply
- [`comp-reference-directive`](references/comp-reference-directive.md) - Use @reference for CSS Module Integration
- [`comp-utility-file-scope`](references/comp-utility-file-scope.md) - Understand Utility File Scope
- [`comp-smart-sorting`](references/comp-smart-sorting.md) - Leverage Smart Utility Sorting
- [`comp-container-customize`](references/comp-container-customize.md) - Customize Container with @utility

### 6. Theming & Design Tokens (MEDIUM)

- [`theme-semantic-tokens`](references/theme-semantic-tokens.md) - Use Semantic Design Token Names
- [`theme-dark-mode-class`](references/theme-dark-mode-class.md) - Use Class-Based Dark Mode for Control
- [`theme-prefix-variables`](references/theme-prefix-variables.md) - Use Prefix for Variable Namespacing
- [`theme-runtime-variables`](references/theme-runtime-variables.md) - Leverage Runtime CSS Variables
- [`theme-color-scheme`](references/theme-color-scheme.md) - Set color-scheme for Native Dark Mode

### 7. Responsive & Adaptive (MEDIUM)

- [`resp-mobile-first`](references/resp-mobile-first.md) - Use Mobile-First Responsive Design
- [`resp-container-queries`](references/resp-container-queries.md) - Use Container Queries for Component-Level Responsiveness
- [`resp-custom-breakpoints`](references/resp-custom-breakpoints.md) - Define Custom Breakpoints in @theme
- [`resp-hover-capability`](references/resp-hover-capability.md) - Understand Hover Behavior on Touch Devices
- [`resp-logical-properties`](references/resp-logical-properties.md) - Use Logical Properties for RTL Support

### 8. Animation & Transitions (LOW-MEDIUM)

- [`anim-gpu-accelerated`](references/anim-gpu-accelerated.md) - Use GPU-Accelerated Transform Properties
- [`anim-starting-style`](references/anim-starting-style.md) - Use @starting-style for Entry Animations
- [`anim-gradient-interpolation`](references/anim-gradient-interpolation.md) - Use OKLCH Gradient Interpolation
- [`anim-3d-transforms`](references/anim-3d-transforms.md) - Use Built-in 3D Transform Utilities

## How to Use

Run in the project root first:

```bash
npx -y @pymodel/react-frontend-skills detect                 # installed vs. targeted versions
npx -y @pymodel/react-frontend-skills scan --skill tailwind  # deprecated APIs → rule IDs
```

Read `references/<rule-id>.md` for each rule above that matches the task and for each `scan` hit: why it matters, then incorrect vs. correct code.

© PyModel · MIT · PyModel/react-frontend-skills

Similar skills

Everything for Frontend and UI →
tailwind-v4-shadcn secondsky Sets up Tailwind CSS v4 with shadcn/ui, Vite, and React. Solves broken CSS variables, theme switching errors, and v4 migration pitfalls. CX Codex +1 8,100installs tailwind-ui-refactor pproenca A skill that refactors HTML with Tailwind utility classes: hierarchy, spacing, typography, color. Useful when you build UI without a designer on hand. CX Codex +1 458installs tailwind-theme-builder jezweb This skill sets up a Tailwind v4 + shadcn/ui theme with dark mode: installs deps, maps CSS variables through @theme inline, wires a theme toggle. CX Codex +1 3,200installs tailwind-v4 existential-birds A skill that tells your coding agent how to set up Tailwind CSS v4: theme in CSS, design tokens, OKLCH colors and dark mode. CX Codex +1 812installs tailwind-patterns davila7 A Claude skill that hands the agent a rulebook for Tailwind CSS v4: CSS-first config, container queries, token architecture. Useful when you build UI with utilities. 2,720installs converting-css-to-tailwind spencerpauly This skill walks a plain CSS file and rewrites its rules as Tailwind utility classes in your markup. Handy when a project moves off hand-written CSS. CX Codex +1 423installs

From the same set10

zod A set of 46 validation and type inference rules for Zod 4 in TypeScript projects. Helps agents write schemas, handle errors, and clean up deprecated syntax. CX Codex +1 476installs typescript A skill with 44 rules on types, tsconfig and async code. Useful when your agent edits compiler config or untangles heavy generics. CX Codex +1 520installs playwright A Playwright skill for Next.js with 45 rules across 8 categories, from test architecture to CI debugging. Useful when tests fail at random. CX Codex +1 485installs ui-design Frontend design guidelines covering 42 rules across 8 categories. It steers interface code toward WCAG accessibility and Core Web Vitals standards. CX Codex +1 513installs tanstack-query Delivers 41 performance rules for TanStack Query v5. Guides AI agents on cache invalidation, key factories, and mutation rollbacks. CX Codex +1 457installs nextjs A skill with 42 rules for Next.js 16 App Router caching, routing and server components. Keeps your agent on current practices instead of deprecated APIs. CX Codex +1 479installs feature-arch A skill that sets folder and module-boundary rules for React apps: 42 rules in 8 categories, from directory layout to file naming. CX Codex +1 473installs shadcn A skill that hands your agent a rulebook for shadcn/ui: component architecture, accessibility, theming, forms and tables. Useful whenever it writes or edits React UI. CX Codex +1 458installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor