skills.rest
Ishaq74
Ishaq74COMMUNITY
Explore all skills by this author →
GitHub

tailwind-v4-shadcn

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Setting up Tailwind CSS v4 with shadcn/ui breaks easily due to deprecated packages, wrong plugin syntax, misplaced CSS variables, and config file conflicts, causing build failures and broken themes. ## Core Features & Use Cases - Four-Step CSS Architecture: Enforces the mandatory pattern of root-level CSS variables with hsl() wrappers, @theme inline mapping, and unwrapped variable references in @layer base. - Dark Mode Implementation: Provides a ThemeProvider component with localStorage persistence, system theme detection, and a dropdown toggle component. - Gotcha Prevention: Documents 18 known failure modes including tw-animate-css import errors, duplicate @layer base blocks, and nested @theme directives. - Use Case: When initializing a new Vite + React project with shadcn/ui, follow the exact install order and copy the provided templates to get a working dark-mode-ready setup without debugging. ## Quick Start Set up Tailwind v4 with shadcn/ui in my Vite React project using the four-step architecture and add 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 "config": "" in components.json and delete tailwind.config.ts. Define colors as CSS variables in :root and map them via @theme inline.

How to add dark mode to shadcn/ui with Tailwind v4?▼

Create a ThemeProvider component that toggles a .dark class on the html element and persists the choice to localStorage. Define dark color overrides in a .dark CSS block, and wrap your app in the ThemeProvider in main.tsx.

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

The bg-primary utility only exists if you map your CSS variable in an @theme inline block, for example --color-primary: var(--primary). Defining the variable in :root alone does not generate utility classes.

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

No, Tailwind v4 uses CSS-first configuration and ignores theme.extend.colors in tailwind.config.ts. Delete the file and set "tailwind": { "config": "" } in components.json to avoid build failures.

How do I install the Typography plugin in Tailwind v4?▼

Install @tailwindcss/typography as a dev dependency, then load it in your CSS with the @plugin directive: @plugin "@tailwindcss/typography". Using @import or the v3 config file plugins array will not work.

Why does my Tailwind v4 build fail after shadcn init?▼

Common causes are the deprecated tailwindcss-animate or tw-animate-css imports and duplicate @layer base blocks added by shadcn init. Remove the deprecated packages and merge duplicate base layers into a single block.

Related Skills

Explore More Software Engineering Skills→
monang404monang404
2

javascript-typescript-typescript-scaffold

Generate TypeScript project structures with pnpm, Vite, Next.js, and Vitest configurations.

Community
Intermediate
VKirillVKirill
15

shadcn

Install, configure, and theme shadcn/ui components in React apps.

Community
Intermediate
anouar1991anouar1991
1

dark-mode-tester

Audit dark mode rendering and color contrast against WCAG 2.1 guidelines.

Community
Advanced
stephendolanstephendolan
2

frontend-design

Generate production-grade frontend interfaces with styling, animations, and interactions.

Community
Basic