skills.rest
scsm-unrestrict
scsm-unrestrictCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-theme-builder

Configures Tailwind v4 and shadcn/ui theming with CSS variables and dark mode.

1|Updated Aug 18, 2026
Search Tags:#theming#react#shadcn/ui#tailwind css#vite#dark mode#css variables
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill tailwind-theme-builder-scsm-unrestrict
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-theme-builder
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/tailwind-theme-builder
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill tailwind-theme-builder-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, @tailwindcss/vite, tw-animate-css, clsx, tailwind-merge, and includes assets (resource) and references (resource) components.

What problem does it solve? Setting up Tailwind v4 with shadcn/ui theming and dark mode involves a strict four-step CSS architecture, and common mistakes like nesting :root inside @layer base or double-wrapping hsl() silently break the theme. This Skill provides the exact configuration pattern, ready-to-copy asset files, and a catalog of 18 diagnosed gotchas to get a working themed UI without trial and error. ## Core Features & Use Cases - Four-Step Theme Architecture: Enforces the mandatory pattern of root-level CSS variables, @theme inline mapping, base layer styles, and a theme provider for class-based dark mode. - Ready-to-Copy Assets: Ships complete index.css, vite.config.ts, theme-provider.tsx, components.json, and a cn() utility for immediate project setup. - 18-Gotcha Troubleshooting Guide: Maps symptoms like missing bg-background classes, broken dark mode, and tw-animate-css build failures to their exact causes and fixes. - Use Case: When migrating a project from Tailwind v3 to v4 and colours stop working, use this Skill to diagnose the issue (e.g., leftover tailwind.config.ts or PostCSS plugin) and apply the correct v4 configuration. ## Quick Start Set up Tailwind v4 with shadcn/ui theming and dark mode in my Vite React project, including the theme provider and toggle component.

Frequently Asked Questions about tailwind-theme-builder

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

FAQPage Schema
How do I set up Tailwind v4 with shadcn/ui dark mode?▼

Install tailwindcss and @tailwindcss/vite, define CSS variables in :root and .dark at root level, map them with @theme inline, and wrap your app in a ThemeProvider that toggles the .dark class on the html element. Delete any tailwind.config.ts file.

Why is bg-background not working in Tailwind v4?▼

The bg-background utility is only generated when your CSS variables are mapped through an @theme inline block, for example --color-background: var(--background). Without this mapping, Tailwind has no knowledge of your custom variables.

Does Tailwind v4 still use tailwind.config.ts?▼

No, Tailwind v4 ignores theme.extend.colors in config files and uses CSS-based configuration instead. Delete tailwind.config.ts and set "config": "" in components.json so shadcn/ui works correctly.

Why are my Tailwind colours all black or white after setup?▼

This happens from double hsl() wrapping, such as writing hsl(var(--background)) when the variable already contains hsl(). Use var(--background) directly in your base styles instead.

Should I use PostCSS or the Vite plugin for Tailwind v4?▼

Use the @tailwindcss/vite plugin added to your Vite config plugins array. The PostCSS approach is the old v3 method and causes Tailwind to not process your styles in v4 projects.

How do I migrate hardcoded Tailwind colors to CSS variables?▼

Replace hardcoded classes like bg-blue-600 with semantic tokens like bg-primary or bg-info, and drop dark: variants since variables switch automatically. The included migration guide maps each colour family to its semantic equivalent with grep commands to find remaining occurrences.

Related Skills

Explore More Software Engineering Skills→
DebuggingInTearsDebuggingInTears

tailwind-theme-builder

Configures Tailwind v4 and shadcn/ui theming for React/Vite projects with dark mode and CSS variables.

Official
Intermediate
moughamirmoughamir

color-palette

Generate accessible Tailwind v4 color palettes with WCAG contrast validation.

Community
Intermediate
Camilo8902Camilo8902

dark-mode-implementer

Implement dark and light mode theming with CSS variables, Tailwind CSS, and React context.

Community
Advanced
acquiaacquia
16

canvas-styling-conventions

Enforce Tailwind CSS v4 theme tokens, CVA variants, and cn utility in Canvas components.

Official
Intermediate