Configure Tailwind v4 theming with shadcn/ui in React + Vite projects.
npx skills add https://github.com/wredzio/core2 --skill tailwind-v4-shadcn-wredzio
Please help me install this Agent Skill. Skill: tailwind-v4-shadcn Source: https://github.com/wredzio/core2/tree/main/.claude/skills/tailwind-v4-shadcn Command: npx skills add https://github.com/wredzio/core2 --skill tailwind-v4-shadcn-wredzio
This Skill helps developers bootstrap a modern Tailwind v4 + shadcn/ui setup using a CSS-variable themed architecture. It eliminates complexity around configuring v4 theming, enables automatic dark mode, and unifies semantic color tokens across a React + Vite project.
Follow these steps to bootstrap Tailwind v4 + shadcn/ui in a React + Vite project:
High-intent search queries and answers about installing and using this skill.
To configure Tailwind v4 theming with shadcn/ui, define CSS variables at the root, map them using @theme inline, apply base styles, and integrate a ThemeProvider. This enables automatic dark mode and semantic color tokens without needing a tailwind.config.ts file.
The best way to set up automatic dark mode is by integrating a ThemeProvider and defining semantic color classes as CSS variables. This architecture responds automatically to theme changes without requiring complex JavaScript configurations.
No, you do not need a tailwind.config.ts file. Tailwind v4 uses a CSS-first configuration workflow and a minimal components.json entry with an empty tailwind config, removing the need for legacy JavaScript configuration.
To migrate from Tailwind v3 to v4, delete your legacy tailwind.config.ts file, install the @tailwindcss/vite plugin, and adopt the CSS-first theming pattern using @theme inline mappings and root CSS variables for your shadcn/ui components.
Yes, you can use CSS variables for semantic color tokens. The Tailwind v4 zero-config workflow relies on CSS-first rules where you define root variables and map them directly in your CSS using @theme inline.
If semantic colors are not updating in dark mode, ensure your CSS variables are properly mapped using @theme inline and that a ThemeProvider is integrated to manage the root variable definitions and automatic theme switching.
mauroviverosConfigure Tailwind v4 and shadcn/ui for React projects with Vite.
UCloud-FEWrap React applications with ThemeProvider from @ucloud-fe/react-components.
freedomw1987Register @tailwindcss/typography via the @plugin CSS directive in Tailwind CSS v4 Vite projects.
gouravsingh311Configure Tailwind v4 design tokens using CSS-first @theme directives.
