skills.rest
FindMalek
FindMalekCOMMUNITY
Explore all skills by this author →
Website𝕏@foundmalekGitHub

tailwind-v4-shadcn

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

9|2|Updated Nov 10, 2025
Search Tags:#react#setup#vite#shadcn-ui#dark-mode#css-variables#tailwind-v4
One-click install
npx skills add https://github.com/FindMalek/dukkani --skill tailwind-v4-shadcn-findmalek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/FindMalek/dukkani/tree/main/.cursor/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/FindMalek/dukkani --skill tailwind-v4-shadcn-findmalek

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Tailwind v4 + shadcn/ui often requires meticulous setup to align theming, dark mode, and plugin configuration. This skill provides a ready-to-use production stack and best practices for a smooth, consistent Tailwind + shadcn/ui integration in React + Vite apps.

Core Features & Use Cases

  • Production-ready Tailwind v4 with shadcn/ui integration for React projects
  • Dark mode support and CSS variable-based theming
  • Clear guidance for migrating from v3 patterns and removing legacy config

Quick Start

Use the provided starter to wire Tailwind v4 + shadcn/ui into a React + Vite project in a few steps.

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

Setting up Tailwind v4 with shadcn/ui requires configuring components.json, removing tailwind.config.ts, applying v4 plugin directives, and enabling a functioning ThemeProvider for CSS variable theming and dark mode.

What changes are needed when migrating shadcn/ui to Tailwind v4?▼

Migrating shadcn/ui to Tailwind v4 involves removing the legacy tailwind.config.ts file and transitioning to v4 plugin directives to align CSS variable theming and dark mode configurations with the new architecture.

Does Tailwind v4 support dark mode with shadcn/ui CSS variables?▼

Yes, Tailwind v4 supports dark mode with shadcn/ui by utilizing CSS variables and implementing a functioning ThemeProvider to manage theme states within your React application.

Why does my shadcn/ui theme break after upgrading to Tailwind v4?▼

Your shadcn/ui theme breaks after upgrading to Tailwind v4 because legacy configurations like tailwind.config.ts are no longer valid; you must transition to v4 plugin directives and update components.json to restore CSS variable theming.

Can I use shadcn/ui components with Tailwind v4 in an existing React app?▼

Yes, you can use shadcn/ui components with Tailwind v4 in an existing React app by migrating from v3 patterns, updating your plugin setup, and ensuring your CSS variable theming is correctly configured for the production stack.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
anderskevanderskev
20

shadcn-ui

Create shadcn/ui components with Radix UI and Tailwind CSS.

Community
Intermediate
Hashzin-0Hashzin-0

logica-isolada

Move UI component logic into reusable hooks and services.

Community
Intermediate
RepairYourTechRepairYourTech
6

tailwind-design-system

Builds Tailwind CSS v4 design systems with tokens and accessibility.

Community
Advanced