skills.rest
muhammaddadu
muhammaddaduCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind-v4-shadcn

Configure Tailwind CSS v4 with shadcn/ui, Vite, React, and dark mode theming.

1|1|Updated Jul 6, 2026
Search Tags:#react#shadcn/ui#tailwind css#vite#dark mode#css variables#frontend setup
One-click install
npx skills add https://github.com/muhammaddadu/ai-skill-collection --skill tailwind-v4-shadcn-muhammaddadu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/muhammaddadu/ai-skill-collection/tree/main/3-delivery/tailwind-v4-shadcn
Command: npx skills add https://github.com/muhammaddadu/ai-skill-collection --skill tailwind-v4-shadcn-muhammaddadu

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Setting up Tailwind CSS v4 with shadcn/ui involves breaking changes from v3—deprecated config files, new @theme inline syntax, and plugin directive changes—that cause build failures and broken themes when done from memory. ## Core Features & Use Cases - Four-Step Architecture: Enforces the mandatory pattern of root-level CSS variables, @theme inline mapping, base layer styles, and automatic dark mode switching. - Ready-to-Copy Templates: Provides production-tested index.css, vite.config.ts, components.json, theme-provider.tsx, and cn() utility files. - Troubleshooting References: Documents 18 known gotchas including tw-animate-css import errors, duplicate @layer base blocks, and double hsl() wrapping. - Use Case: When scaffolding a new Vite + React project, follow the quick start to install @tailwindcss/vite, configure components.json with an empty config field, and get working light/dark theming in minutes. ## Quick Start Set up Tailwind CSS v4 with shadcn/ui in my Vite React project including dark mode support.

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

Install tailwindcss and @tailwindcss/vite, add the tailwindcss() plugin to vite.config.ts, run shadcn init, then set the tailwind config field to an empty string in components.json. Delete any tailwind.config.ts file since v4 uses CSS-based configuration.

Why is bg-primary not working in Tailwind v4?▼

The bg-primary utility only exists after mapping CSS variables through an @theme inline block, such as --color-primary: var(--primary). Defining variables in :root alone does not generate Tailwind utility classes.

Does Tailwind v4 still use tailwind.config.ts?▼

No, Tailwind v4 ignores theme.extend.colors in tailwind.config.ts and uses CSS-first configuration instead. Delete the file and define colors as CSS variables in :root and .dark, then map them with @theme inline.

How do I add dark mode to a Vite React app with shadcn/ui?▼

Create a ThemeProvider component that toggles the .dark class on the html element and persists the choice to localStorage, then wrap your app with it in main.tsx. Define dark color overrides in a .dark CSS block so semantic utilities switch automatically.

Why does my Tailwind v4 build fail with tw-animate-css errors?▼

The tailwindcss-animate package is deprecated in v4 and tw-animate-css imports do not exist, causing build failures. Remove these packages and use native CSS animations or @tailwindcss/motion instead.

How do I install Tailwind v4 plugins like Typography?▼

Install the plugin package, then load it in CSS with the @plugin directive, for example @plugin "@tailwindcss/typography" after the tailwindcss import. Using @import or the v3 config file plugins array will not work.

Related Skills

Explore More Software Engineering Skills→
OpenAEC-FoundationOpenAEC-Foundation
6

react-impl-project-setup

Automate React project setup with Vite, TypeScript, ESLint, and Prettier.

Official
Intermediate
ChatAndBuildChatAndBuild
1

cloudflare-deploy

Deploy applications and manage services on Cloudflare using Workers and Pages.

Official
Advanced
davila7davila7
30.5k

tailwind-patterns

Implements Tailwind CSS v4 patterns including CSS-first configuration, container queries, and design tokens.

Community
Intermediate
magicappdevmagicappdev
2

tailwind-setup

Automate Tailwind CSS v4 setup for Expo apps with NativeWind v5.

Official
Advanced