skills.rest
rauell1
rauell1COMMUNITY
Explore all skills by this author →
Website𝕏@rauell_GitHub

tailwind-v4-shadcn

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

3|Updated Mar 17, 2026
Search Tags:#theming#migration#vite#shadcn-ui#dark-mode#css-variables#tailwind-v4
One-click install
npx skills add https://github.com/rauell1/safaricharge --skill tailwind-v4-shadcn-rauell1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/rauell1/safaricharge/tree/main/.agents/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/rauell1/safaricharge --skill tailwind-v4-shadcn-rauell1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers set up and debug Tailwind CSS v4 with shadcn/ui so theme variables, dark mode, and utility classes work correctly from the start.

Core Features & Use Cases

  • Production-tested patterns for CSS variable-driven theming in React and Vite projects.
  • Reliable dark mode setup with a ThemeProvider, system theme detection, and persistence.
  • Migration and troubleshooting guidance for common v4 issues such as missing utilities, duplicate base layers, and invalid plugin syntax.

Quick Start

Apply the skill to your Tailwind v4 and shadcn/ui project to verify the CSS variable setup, theme provider, and Vite plugin configuration before you ship.

Frequently Asked Questions about tailwind-v4-shadcn

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

FAQPage Schema
How do I configure Tailwind v4 with shadcn/ui so theme variables and utilities work correctly?▼

To configure dark mode in Tailwind v4 with shadcn/ui, implement a ThemeProvider-based flow that detects the system theme, persists the user preference, and maps the toggled theme values to CSS variables using @theme inline so dark mode styles apply correctly.

Why are my Tailwind v4 utilities missing or showing duplicate base layers after migrating?▼

Missing Tailwind v4 utilities or duplicate base layers after migrating usually result from invalid plugin syntax or incorrect CSS variable mapping. You must remove invalid v3 plugin syntax and properly configure @theme inline with @tailwindcss/vite to resolve the broken styling.

Does shadcn/ui work with Vite and Tailwind CSS v4?▼

Yes, shadcn/ui works with Vite and Tailwind CSS v4 by integrating the @tailwindcss/vite plugin, maintaining an empty components.json for the Tailwind config, and mapping theme variables through @theme inline to prevent broken theming during React development.

What is the best way to migrate a shadcn/ui project from Tailwind v3 to v4?▼

The best way to migrate a shadcn/ui project from Tailwind v3 to v4 involves updating to the @tailwindcss/vite integration, converting your configuration to an empty components.json file, and remapping existing theme colors to CSS variables using @theme inline to avoid missing utilities.

Related Skills

Explore More Software Engineering Skills→
wredziowredzio

tailwind-v4-shadcn

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

Community
Advanced
jubalmjubalm
1

shadcn/ui Customization & Theming

Configure CSS variable-based theming for shadcn/ui components with Tailwind.

Community
Advanced
angelgarciasolorzanoangelgarciasolorzano

tailwindcss

Develop web interfaces with Tailwind CSS utility classes and responsive variants.

Community
Intermediate
mohamed-g-shoaibmohamed-g-shoaib
2

tailwind-design-system

Standardize UI development with Tailwind CSS v4 design tokens and CSS-first theming.

Community
Advanced