# Send Tailwind v4 Shadcn to your agent
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
## Fast path
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
## Suggested prompts
### New install

```text
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete.
```
### Upgrade existing

```text
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run.
```
## Machine-readable fields
```json
{
  "schemaVersion": "1.0",
  "item": {
    "slug": "tailwind-v4-shadcn",
    "name": "Tailwind v4 Shadcn",
    "source": "tencent",
    "type": "skill",
    "category": "AI 智能",
    "sourceUrl": "https://clawhub.ai/wpank/tailwind-v4-shadcn",
    "canonicalUrl": "https://clawhub.ai/wpank/tailwind-v4-shadcn",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadUrl": "/downloads/tailwind-v4-shadcn",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=tailwind-v4-shadcn",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "README.md",
      "SKILL.md",
      "commands/setup.md",
      "templates/theme-provider.tsx",
      "templates/tsconfig.app.json",
      "templates/utils.ts"
    ],
    "downloadMode": "redirect",
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/tailwind-v4-shadcn"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    }
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/tailwind-v4-shadcn",
    "downloadUrl": "https://openagent3.xyz/downloads/tailwind-v4-shadcn",
    "agentUrl": "https://openagent3.xyz/skills/tailwind-v4-shadcn/agent",
    "manifestUrl": "https://openagent3.xyz/skills/tailwind-v4-shadcn/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/tailwind-v4-shadcn/agent.md"
  }
}
```
## Documentation

### Tailwind v4 + shadcn/ui Stack

Production-tested setup for Tailwind v4 with shadcn/ui. Prevents 8 documented errors through a mandatory four-step architecture.

### WHAT

Complete Tailwind v4 + shadcn/ui configuration:

Four-step theming architecture (mandatory)
CSS variable-based color system
Automatic dark mode switching
Error prevention for 8 common mistakes
Migration guide from v3
Production-ready templates

### WHEN

Starting a new React/Vite project with Tailwind v4
Migrating from Tailwind v3 to v4
Setting up shadcn/ui with Tailwind v4
Debugging: colors not working, dark mode broken, build failures
Fixing @theme inline, @apply, or @layer base issues

### KEYWORDS

tailwind v4, tailwindcss 4, shadcn, shadcn/ui, @theme inline, dark mode, css variables, vite, tw-animate-css, tailwind config, migration

Production verified: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev)
Versions: tailwindcss@4.1.18, @tailwindcss/vite@4.1.18

### OpenClaw / Moltbot / Clawbot

npx clawhub@latest install tailwind-v4-shadcn

### Quick Start

# 1. Install dependencies
pnpm add tailwindcss @tailwindcss/vite
pnpm add -D @types/node tw-animate-css
pnpm dlx shadcn@latest init

# 2. Delete v3 config (v4 doesn't use it)
rm tailwind.config.ts

vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: { alias: { '@': path.resolve(__dirname, './src') } }
})

components.json (CRITICAL):

{
  "tailwind": {
    "config": "",
    "css": "src/index.css",
    "baseColor": "slate",
    "cssVariables": true
  }
}

### The Four-Step Architecture (MANDATORY)

Skipping steps breaks theming. Follow exactly:

### Step 1: Define CSS Variables at Root

/* src/index.css */
@import "tailwindcss";
@import "tw-animate-css";

:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(222.2 84% 4.9%);
  --primary: hsl(221.2 83.2% 53.3%);
  --primary-foreground: hsl(210 40% 98%);
  /* ... all light mode colors with hsl() wrapper */
}

.dark {
  --background: hsl(222.2 84% 4.9%);
  --foreground: hsl(210 40% 98%);
  --primary: hsl(217.2 91.2% 59.8%);
  --primary-foreground: hsl(222.2 47.4% 11.2%);
  /* ... all dark mode colors */
}

Critical: Define at root level (NOT inside @layer base). Use hsl() wrapper.

### Step 2: Map Variables to Tailwind

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  /* ... map ALL CSS variables */
}

Why: Generates utility classes (bg-background, text-primary). Without this, utilities don't exist.

### Step 3: Apply Base Styles

@layer base {
  body {
    background-color: var(--background);
    color: var(--foreground);
  }
}

Critical: Reference variables directly. Never double-wrap: hsl(var(--background)).

### Step 4: Result - Automatic Dark Mode

<div className="bg-background text-foreground">
  {/* Theme switches automatically via .dark class */}
</div>

No dark: variants needed for semantic colors.

### Always Do

Wrap colors with hsl() in :root/.dark: --bg: hsl(0 0% 100%);
Use @theme inline to map all CSS variables
Set "tailwind.config": "" in components.json
Delete tailwind.config.ts if exists
Use @tailwindcss/vite plugin (NOT PostCSS)

### Never Do

Put :root/.dark inside @layer base
Use .dark { @theme { } } (v4 doesn't support nested @theme)
Double-wrap: hsl(var(--background))
Use tailwind.config.ts for theme
Use @apply with @layer base/components classes
Use dark: variants for semantic colors

### Error 1: tw-animate-css Import

Error: Cannot find module 'tailwindcss-animate'

# Wrong (v3 package)
npm install tailwindcss-animate

# Correct (v4 package)
pnpm add -D tw-animate-css

@import "tailwindcss";
@import "tw-animate-css";

### Error 2: Colors Not Working

Error: bg-primary doesn't apply styles

Cause: Missing @theme inline mapping

@theme inline {
  --color-primary: var(--primary);
  /* Map ALL variables */
}

### Error 3: Dark Mode Not Switching

Cause: Missing ThemeProvider

See templates/theme-provider.tsx and wrap your app.

### Error 4: Build Fails

Error: Unexpected config file

rm tailwind.config.ts  # v4 doesn't use this

### Error 5: @theme inline Breaks Multi-Theme

Cause: @theme inline bakes values at build time

Use @theme (without inline) for multi-theme systems:

/* For multi-theme (not just light/dark) */
@theme {
  --color-text-primary: var(--color-slate-900);
}

@layer theme {
  [data-theme="dark"] {
    --color-text-primary: var(--color-white);
  }
}

### Error 6: @apply Breaking

Error: Cannot apply unknown utility class

v4 changed @apply behavior:

/* Wrong (v3 pattern) */
@layer components {
  .custom-button { @apply px-4 py-2; }
}

/* Correct (v4 pattern) */
@utility custom-button {
  @apply px-4 py-2;
}

### Error 7: @layer base Styles Ignored

Cause: CSS layer cascade issues

/* Better: Don't use @layer base for critical styles */
body {
  background-color: var(--background);
}

### Quick Reference

SymptomCauseFixbg-primary doesn't workMissing @theme inlineAdd mappingColors black/whiteDouble hsl()Use var(--color) not hsl(var(--color))Dark mode stuckMissing ThemeProviderWrap appBuild failstailwind.config.ts existsDelete fileAnimation errorsWrong packageUse tw-animate-css

### OKLCH Color Space

v4 uses OKLCH for perceptually uniform colors. Automatic sRGB fallbacks generated.

@theme {
  /* Modern approach */
  --color-brand: oklch(0.7 0.15 250);
  
  /* Legacy (still works) */
  --color-brand: hsl(240 80% 60%);
}

### Container Queries (Built-in)

<div className="@container">
  <div className="@md:text-lg @lg:grid-cols-2">
    Content responds to container width
  </div>
</div>

### Line Clamp (Built-in)

<p className="line-clamp-3">Truncate to 3 lines...</p>

### Plugins

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

### Key Changes

Delete tailwind.config.ts
Move theme to CSS with @theme inline
Replace tailwindcss-animate → tw-animate-css
Replace require() → @plugin
@apply in @layer components → @utility

### Color Migration

// Before: Hardcoded + dark variants
<div className="bg-blue-50 dark:bg-blue-950 text-blue-700 dark:text-blue-300">

// After: Semantic + automatic
<div className="bg-info/10 text-info">

### Visual Changes

Ring width default: 3px → 1px (use ring-3 to match v3)
Heading styles removed from Preflight (add via @tailwindcss/typography or custom)

### Files

templates/index.css - Complete CSS with all variables
templates/theme-provider.tsx - Dark mode provider
templates/vite.config.ts - Vite configuration
templates/components.json - shadcn/ui v4 config
templates/utils.ts - cn() utility
references/architecture.md - Deep dive on four-step pattern
references/migration-guide.md - Semantic color migration
references/dark-mode.md - Complete dark mode setup

### Setup Checklist

@tailwindcss/vite installed
 vite.config.ts uses tailwindcss() plugin
 components.json has "config": ""
 NO tailwind.config.ts exists
 src/index.css follows 4-step pattern
 ThemeProvider wraps app
 Theme toggle works

### NEVER

Put :root or .dark inside @layer base
Use tailwind.config.ts with v4 (it's ignored)
Double-wrap colors: hsl(var(--background))
Use tailwindcss-animate (use tw-animate-css)
Use @apply on @layer base/components classes in v4
Skip the @theme inline step
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: wpank
- Version: 1.0.0
## Source health
- Status: healthy
- Source download looks usable.
- Yavira can redirect you to the upstream package for this source.
- Health scope: source
- Reason: direct_download_ok
- Checked at: 2026-04-30T16:55:25.780Z
- Expires at: 2026-05-07T16:55:25.780Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/tailwind-v4-shadcn)
- [Send to Agent page](https://openagent3.xyz/skills/tailwind-v4-shadcn/agent)
- [JSON manifest](https://openagent3.xyz/skills/tailwind-v4-shadcn/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/tailwind-v4-shadcn/agent.md)
- [Download page](https://openagent3.xyz/downloads/tailwind-v4-shadcn)