tailwind-v4-shadcn

v3.9.0

Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns.

CodexClaude Code1 Skill

By Claude Skills MaintainersLicense: MIT227 GitHub starsUpdated last week

Directory evidence

Runtimes: Codex and Claude Code
Parsed components: 1 skill or MCP entry
Source updated: Sep 28, 2026
Manifest status: Canonical path parsed

The directory validates manifest shape and source location. It does not execute the plugin or provide a security endorsement. Review the indexing methodology →

Install tailwind-v4-shadcn for Codex and Claude Code

Installs for the current user

codex plugin marketplace add secondsky/claude-skills
codex plugin marketplace upgrade claude-skills
codex plugin add tailwind-v4-shadcn@claude-skills

Paste and run these commands in a terminal with Codex. They add and refresh the claude-skills catalog, then install this plugin.

Compatibility: the page URL and API slug “tailwind-v4-shadcn” remain stable.

Codex: tailwind-v4-shadcn@agent-plugin-marketplace → tailwind-v4-shadcn@claude-skills

The installer fetches third-party code from the source repository shown on this page. This directory validates manifest structure and source location, but does not perform a security audit; review the manifest, components, and source before installing.

Get the source manually

$ git clone https://github.com/secondsky/claude-skills

Clone the source repository, then follow its setup instructions to add the plugin to a compatible client. The plugin root is plugins/tailwind-v4-shadcn/.

Plugin files

plugins/tailwind-v4-shadcn/

├── .codex-plugin/plugin.json
├── .claude-plugin/plugin.json
└── skills/tailwind-v4-shadcn/SKILL.md

Included Skills1

tailwind-v4-shadcnskills/tailwind-v4-shadcn/SKILL.md

| Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns.

Plugin manifests2

plugins/tailwind-v4-shadcn/.codex-plugin/plugin.json

{
  "name": "tailwind-v4-shadcn",
  "version": "3.9.0",
  "description": "Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns.",
  "author": {
    "name": "Claude Skills Maintainers",
    "email": "[email protected]"
  },
  "license": "MIT",
  "repository": "https://github.com/secondsky/claude-skills",
  "keywords": [
    "tailwind-v4-shadcn",
    "tailwind",
    "shadcn",
    "frontend",
    "components",
    "css",
    "themeprovider"
  ],
  "skills": "./skills/",
  "interface": {
    "displayName": "Tailwind V4 Shadcn",
    "shortDescription": "Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.",
    "longDescription": "Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns.",
    "developerName": "Claude Skills Maintainers",
    "category": "Frontend",
    "capabilities": [
      "Read",
      "Write"
    ],
    "defaultPrompt": [
      "Help me with Tailwind V4 Shadcn.",
      "Show me best practices for Tailwind V4 Shadcn.",
      "Guide me through using Tailwind V4 Shadcn effectively."
    ]
  }
}

plugins/tailwind-v4-shadcn/.claude-plugin/plugin.json

{
  "name": "tailwind-v4-shadcn",
  "description": "Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns.",
  "version": "3.9.0",
  "author": {
    "name": "Claude Skills Maintainers",
    "email": "[email protected]"
  },
  "license": "MIT",
  "repository": "https://github.com/secondsky/claude-skills",
  "keywords": [
    "tailwind-v4-shadcn",
    "tailwind",
    "shadcn",
    "frontend",
    "components",
    "css",
    "themeprovider"
  ]
}

For maintainers

If you maintain this plugin, link to this source-backed listing from your README so users can review its manifest and indexed components.

[tailwind-v4-shadcn on Agent Plugins Marketplace](https://pluginsmp.com/plugins/tailwind-v4-shadcn)