skills.rest
SonPaier
SonPaierCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-theme-builder

Configure Tailwind CSS v4 with shadcn/ui theming and dark mode in React projects.

Updated Aug 27, 2026
Search Tags:#theming#react#shadcn/ui#vite#tailwind#dark mode#css variables
One-click install
npx skills add https://github.com/SonPaier/carfect --skill tailwind-theme-builder-sonpaier
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-theme-builder
Source: https://github.com/SonPaier/carfect/tree/main/.claude/skills/tailwind-theme-builder
Command: npx skills add https://github.com/SonPaier/carfect --skill tailwind-theme-builder-sonpaier

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, @tailwindcss/vite, @types/node, tw-animate-css, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the setup of Tailwind CSS v4 with shadcn/ui, ensuring a correctly configured, themed, and dark-mode-ready project from the start. It resolves common issues related to CSS variables, dark mode conflicts, and v3 migration.

Core Features & Use Cases

  • Automated Tailwind v4 Setup: Installs necessary dependencies and configures Vite for Tailwind v4.
  • Shadcn/ui Theming: Integrates shadcn/ui with CSS variables for a robust theming system.
  • Dark Mode Implementation: Sets up seamless dark mode switching using a ThemeProvider.
  • Error Resolution: Fixes issues like broken colors, @apply errors, and animation conflicts.
  • Use Case: When starting a new React project that requires Tailwind v4 and shadcn/ui, use this Skill to quickly establish a consistent and customizable design system.

Quick Start

Run the pnpm commands to install dependencies and initialize shadcn/ui.

Frequently Asked Questions about tailwind-theme-builder

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

FAQPage Schema
How do I configure Tailwind CSS v4 with shadcn/ui in a React project?▼

To configure Tailwind CSS v4 with shadcn/ui, you need to install specific dependencies, set up Vite, map CSS variables using @theme inline, and initialize a ThemeProvider for dark mode. This ensures a correctly themed project.

Why are my CSS variables and colors broken after migrating to Tailwind v4?▼

Broken CSS variables and colors during Tailwind v4 migration usually stem from incorrect @theme inline mapping or configuration conflicts. Properly configuring CSS variable mapping and resolving v3 migration issues fixes these broken styles.

How do I fix @apply errors and animation conflicts in Tailwind v4?▼

To fix @apply errors and animation conflicts in Tailwind v4, ensure dependencies like tw-animate-css are installed and configured correctly. Resolving these CSS variable conflicts ensures animations apply properly.

Can I use Tailwind v4 with Vite for shadcn/ui theming?▼

Yes, you can use Tailwind v4 with Vite for shadcn/ui theming. The setup requires installing @tailwindcss/vite and configuring Vite to process Tailwind CSS, resulting in a customizable design system.

What is the best way to set up dark mode in a React app using Tailwind v4?▼

The best way to set up dark mode with Tailwind v4 is integrating shadcn/ui CSS variables and a ThemeProvider. This approach resolves dark mode conflicts and enables seamless theme switching.

Related Skills

Explore More Software Engineering Skills→
otoshekotoshek
2

tailwind-setup

Configure Tailwind CSS and shadcn/ui for React frontends with Django backends.

Community
Advanced
Yoriichi-DangYoriichi-Dang

tailwind-v4-shadcn

Migrate React projects to Tailwind v4 with shadcn/ui using CSS-first theming.

Community
Advanced
ever-worksever-works
21

tailwind-v4-shadcn

Automate Tailwind CSS v4 setup with shadcn/ui and Vite for React projects.

Official
Advanced
rauell1rauell1
3

tailwind-v4-shadcn

Configure Tailwind CSS v4 and shadcn/ui theming with CSS variables and Vite.

Community
Advanced