skills.rest
BrunoAlpezdev
BrunoAlpezdevCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-v4-shadcn

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

Updated Apr 11, 2026
Search Tags:#shadcn-ui#dark-mode#css-variables#tailwind-v4#react-theming#vite-setup
One-click install
npx skills add https://github.com/BrunoAlpezdev/lluvia-de-ideas --skill tailwind-v4-shadcn-brunoalpezdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/BrunoAlpezdev/lluvia-de-ideas/tree/main/.agents/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/BrunoAlpezdev/lluvia-de-ideas --skill tailwind-v4-shadcn-brunoalpezdev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Tailwind CSS v4 and shadcn/ui theme setups commonly fail in subtle ways, especially around CSS variable architecture and dark mode switching, causing broken semantic colors, missing utilities, and build-breaking configuration mistakes.

Core Features & Use Cases

  • Production-tested Tailwind v4 + shadcn/ui foundation: Implements the correct CSS-first setup for React projects using Tailwind v4 with shadcn/ui.
  • Reliable dark mode and theme switching: Provides a verified pattern using a ThemeProvider and the .dark class on the html element so colors swap automatically.
  • Semantic color tokens via CSS variables: Ensures semantic utilities (e.g., bg-primary, text-foreground) exist by mapping CSS variables to Tailwind via @theme inline.
  • Common v4 gotchas prevented: Avoids frequent issues like wrong config usage, incorrect @theme placement, duplicate @layer base, and double hsl() wrapping.

Quick Start

Activate the skill and ask the AI to generate an updated src/index.css and components.json for Tailwind v4 + shadcn/ui using semantic CSS variables and verified dark mode patterns.

Frequently Asked Questions about tailwind-v4-shadcn

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

FAQPage Schema
How do I set up Tailwind v4 and shadcn/ui without breaking semantic colors?▼

Setting up Tailwind v4 and shadcn/ui without breaking semantic colors requires mapping a root-level CSS variables system to `@theme inline`, ensuring utilities like `bg-primary` generate correctly and preventing styling regressions.

Why does dark mode switching fail in my React Vite project using Tailwind v4?▼

Dark mode switching fails in Tailwind v4 when the `.dark` class is not properly toggled on the `html` element by a ThemeProvider, causing color variables to not swap automatically.

Can I migrate an existing shadcn/ui project from Tailwind v3 to v4?▼

You can migrate from Tailwind v3 to v4 by applying a verified CSS-first setup that updates your Vite plugin usage, `components.json`, and `src/index.css` to prevent missing utilities and configuration errors.

How do CSS variables and `@theme inline` work together in Tailwind v4?▼

In Tailwind v4, `@theme inline` maps your root-level CSS variables to the framework, ensuring semantic color tokens exist and avoiding common gotchas like duplicate `@layer base` or double `hsl()` wrapping.

What causes missing Tailwind utilities after migrating to shadcn/ui v4?▼

Missing Tailwind utilities after migrating to shadcn/ui v4 are typically caused by wrong configuration usage or incorrect `@theme` placement, which prevents semantic tokens from generating properly.

Related Skills

Explore More Software Engineering Skills→
wredziowredzio

tailwind-v4-shadcn

Configure Tailwind v4 theming with shadcn/ui in React + Vite projects.

Community
Advanced
moughamirmoughamir

tailwind-theme-builder

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

Community
Intermediate
BoristokaBoristoka

darkmode

Toggle website dark mode via HTML class and React component.

Community
Basic
mauroviverosmauroviveros

tailwind-v4-shadcn

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

Community
Advanced