skills.rest
moughamir
moughamirCOMMUNITY
Explore all skills by this author →
Website𝕏@omnizyaGitHub

tailwind-theme-builder

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

Updated Mar 26, 2026
Search Tags:#theming#vite#dark mode#shadcn ui#css variables#tailwindcss#react setup
One-click install
npx skills add https://github.com/moughamir/justwaitit-review --skill tailwind-theme-builder-moughamir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-theme-builder
Source: https://github.com/moughamir/justwaitit-review/tree/main/.agents/skills/tailwind-theme-builder
Command: npx skills add https://github.com/moughamir/justwaitit-review --skill tailwind-theme-builder-moughamir

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

Tailwind v4 + shadcn/ui theming often fails when CSS variables, the @theme inline mapping, and dark mode wiring are not structured in the required order, leading to missing semantic color utilities or non-functioning dark mode.

Core Features & Use Cases

  • Tailwind v4 semantic theming architecture: defines root-level CSS variables and maps them to Tailwind utilities via @theme inline so classes like bg-background and text-primary work consistently.
  • Dark mode implemented correctly: switches themes by toggling the .dark class (with ThemeProvider) instead of relying on dark: variants for semantic colors.
  • shadcn/ui-compatible setup: bootstraps shadcn/ui, configures Vite with the Tailwind v4 plugin, and provides a theme provider + utilities to use in a React app.
  • Fixes common real-world breakages: prevents issues such as bg-primary not generating, duplicate @layer base blocks, broken @theme inline placement, and deprecated animation dependencies.

Quick Start

Follow the workflow in the skill to initialize Tailwind v4 and shadcn/ui, then copy the provided CSS/theme-provider assets and wrap your app with the ThemeProvider to enable working semantic colors and dark mode.

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 semantic theming with shadcn/ui in a React project?▼

To set up Tailwind v4 semantic theming with shadcn/ui, define root-level CSS variables and map them to Tailwind utilities via @theme inline so classes like bg-background and text-primary work consistently. This requires deterministic Vite Tailwind plugin configuration.

Why does dark mode not toggle correctly when using Tailwind v4 and shadcn/ui?▼

Dark mode fails to toggle correctly when relying on dark: variants for semantic colors instead of toggling the .dark class. Implementing dark mode correctly requires ThemeProvider-based .dark class toggling on the root element.

How do I fix bg-primary not generating in my Tailwind v4 CSS configuration?▼

The bg-primary utility fails to generate when the @theme inline mapping is misplaced or duplicate @layer base blocks exist. Fix this by establishing strict ordering of root-level :root/.dark variables and avoiding unsupported Tailwind v4 patterns.

Can I use the Vite Tailwind v4 plugin to bootstrap shadcn/ui theming?▼

Yes, you can use the Vite Tailwind v4 plugin to bootstrap shadcn/ui theming by configuring the plugin deterministically, copying provided CSS assets, and wrapping your React app with a ThemeProvider to enable working semantic colors.

What causes missing semantic color utilities in a Tailwind v4 shadcn/ui setup?▼

Missing semantic color utilities occur when CSS variables, the @theme inline mapping, and dark mode wiring are not structured in the required order. Establishing a reliable semantic theming pipeline prevents these generation failures.

Related Skills

Explore More Software Engineering Skills→
mauroviverosmauroviveros

tailwind-v4-shadcn

Configure Tailwind v4 and shadcn/ui for React projects with Vite.

Community
Advanced
MadAppGangMadAppGang
7

shadcn-ui

Integrate shadcn/ui components with React Hook Form and Zod.

Official
Intermediate
BoristokaBoristoka

darkmode

Toggle website dark mode via HTML class and React component.

Community
Basic
BrunoAlpezdevBrunoAlpezdev

tailwind-v4-shadcn

Configure Tailwind CSS v4 and shadcn/ui with semantic CSS variables and dark mode.

Community
Intermediate