skills.rest
0xarcano
0xarcanoCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-v4-shadcn

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

Updated Feb 2, 2026
Search Tags:#react#shadcn/ui#vite#tailwind#dark mode#css variables#ui setup
One-click install
npx skills add https://github.com/0xarcano/UXWallet --skill tailwind-v4-shadcn-0xarcano
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/0xarcano/UXWallet/tree/main/frontend/.agents/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/0xarcano/UXWallet --skill tailwind-v4-shadcn-0xarcano

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tailwindcss/vite, clsx, tailwind-merge, and includes scripts (resource) and references (resource) and templates (resource) components.

What problem does it solve?

This Skill streamlines the setup of Tailwind CSS v4 and shadcn/ui in React projects, preventing common configuration errors and ensuring a robust, maintainable theming architecture.

Core Features & Use Cases

  • Production-Ready Setup: Integrates Tailwind v4 with shadcn/ui components using the recommended CSS variable architecture.
  • Error Prevention: Addresses 8 documented errors related to Tailwind v4, dark mode, and @apply directives.
  • Use Case: When starting a new React project or migrating an existing one to Tailwind v4, use this Skill to quickly establish a correct and efficient styling foundation, including seamless dark mode support.

Quick Start

Run the setup command to initialize Tailwind v4 and shadcn/ui in your Vite project.

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 CSS v4 with shadcn/ui in a Vite React project?▼

To configure Tailwind CSS v4 with shadcn/ui, run the setup command to initialize a CSS variable-based theming architecture and integrate the Vite plugin for automatic dark mode support.

Why does my shadcn/ui dark mode break after migrating to Tailwind v4?▼

Dark mode breaks during Tailwind v4 migration due to incorrect CSS variable mapping or missing @theme inline directives, which this setup resolves by implementing the recommended architecture.

Can I use @apply directives with shadcn/ui components in Tailwind v4?▼

You can use @apply directives with shadcn/ui in Tailwind v4, but this setup specifically addresses and prevents common configuration errors that cause @apply to fail during component integration.

What dependencies are required to set up Tailwind v4 and shadcn/ui?▼

Setting up Tailwind v4 and shadcn/ui requires the @tailwindcss/vite plugin, clsx, and tailwind-merge to manage component class merging and ensure correct styling architecture.

What is the best way to structure CSS variables for theming in Tailwind v4?▼

The best way to structure CSS variables for theming in Tailwind v4 is using @theme inline directives to map variables, ensuring seamless dark mode support and preventing mapping errors.

Related Skills

Explore More Software Engineering Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
bluebricks-nlbluebricks-nl

tailwind-v4-shadcn

Configure Tailwind CSS v4 and shadcn/ui in Vite React projects.

Official
Advanced
YanchiHuangYanchiHuang

tailwind-v4-shadcn

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

Community
Advanced
whimzyLivewhimzyLive
3

tailwind-design-system

Configure Tailwind CSS v4 themes with CSS variables and dark mode.

Community
Advanced