Individual skill

tailwind-theme-builder

Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.

plugins/frontend/skills/tailwind-theme-builder/SKILL.md

Read pinned source

Source commit 1260fa7439b36b18dbf16648ccc7fb44783f6c23

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: No
Repository scan complete: No
Skill scan complete: No
Observed behavior: Not checked yet
Last checked: Nov 3, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 1,104
Repository last updated: Oct 9, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

ai Repository topic
automation Repository topic
claude-code Repository topic
claude-skills Repository topic
cloudflare Repository topic
react Repository topic
tailwind Repository topic
vite Repository topic
anthropic Repository topic
devtools Repository topic
design Derived category
design-interface Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 12,714 bytes
SKILL.mdcore · 12,714 bytes
SKILL.mdcore · 12,714 bytes
SKILL.mdcore · 12,714 bytes
assets/components.jsonasset · 396 bytes
assets/index.cssasset · 4,647 bytes
assets/theme-provider.tsxruns · 2,301 bytes
assets/tsconfig.app.jsonasset · 719 bytes
assets/utils.tsruns · 166 bytes
assets/vite.config.tsruns · 337 bytes
references/migration-guide.mddoc · 6,929 bytes

Read excerpt


# Tailwind Theme Builder

Set up a fully themed Tailwind v4 + shadcn/ui project with dark mode. Produces configured CSS, theme provider, and working component library.

## Architecture: The Four-Step Pattern

Tailwind v4 requires a specific architecture for CSS variable-based theming. This pattern is **mandatory** -- skipping or modifying steps breaks the theme.

### How It Works

```
CSS Variable Definition --> @theme inline Mapping --> Tailwind Utility Class
--background           --> --color-background     --> bg-background
(with hsl() wrapper)      (references variable)     (generated class)