skills.rest
hashabc-com
hashabc-comOFFICIAL
Explore all skills by this author →
GitHub

tailwind-v4-shadcn

Set up a Vite + React project with Tailwind CSS v4 and shadcn/ui.

Updated Aug 27, 2026
Search Tags:#react#shadcn/ui#vite#dark mode#tailwind v4#frontend setup
One-click install
npx skills add https://github.com/hashabc-com/taropay_sass_website --skill tailwind-v4-shadcn-hashabc-com
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/hashabc-com/taropay_sass_website/tree/main/.github/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/hashabc-com/taropay_sass_website --skill tailwind-v4-shadcn-hashabc-com

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, @tailwindcss/vite, clsx, tailwind-merge, react, react-dom, @types/node, @vitejs/plugin-react, vite, typescript, tw-animate-css, and includes scripts (resource) and references (resource) and templates (resource) components.

What problem does it solve?

This Skill automates the setup of a production-ready Vite + React project with Tailwind CSS v4 and shadcn/ui, preventing common configuration errors and including essential features like dark mode.

Core Features & Use Cases

  • Correct v4 Architecture: Implements the @theme inline pattern and CSS variable architecture.
  • Dark Mode: Includes a ThemeProvider for seamless light/dark/system theme switching.
  • Error Prevention: Fixes common issues like tw-animate-css errors, duplicate @layer declarations, and incorrect color mapping.
  • Use Case: When starting a new Vite + React project, use this Skill to quickly set up Tailwind v4 and shadcn/ui with dark mode, ensuring a robust and error-free foundation.

Quick Start

Use the tailwind-v4-shadcn skill to set up a new Vite + React project with Tailwind v4 and shadcn/ui.

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 React project?▼

To set up Tailwind v4 with shadcn/ui in a Vite React project, configure the `@tailwindcss/vite` plugin and implement the `@theme inline` pattern for CSS variables. This ensures correct v4 syntax for themes and automatic dark mode support.

What is the correct way to configure dark mode in Tailwind v4 and shadcn/ui?▼

Correct dark mode in Tailwind v4 and shadcn/ui requires a ThemeProvider for light/dark/system switching and a CSS variable architecture mapped through the `@theme inline` pattern. This prevents incorrect color mapping and duplicate `@layer` declarations.

How do I fix duplicate @layer declarations when using shadcn/ui with Tailwind v4?▼

Fix duplicate `@layer` declarations in shadcn/ui with Tailwind v4 by migrating to the correct v4 architecture using the `@theme inline` pattern. This prevents common configuration errors and ensures proper CSS variable mapping.

Does shadcn/ui work automatically with Tailwind v4?▼

shadcn/ui works with Tailwind v4 but requires specific setup adjustments like implementing the `@theme inline` pattern and fixing `tw-animate-css` errors to ensure a production-ready foundation without configuration conflicts.

Can I use Tailwind v4 CSS variables for shadcn/ui theme customization?▼

You can use Tailwind v4 CSS variables for shadcn/ui theme customization by implementing the `@theme inline` pattern. This architecture maps colors correctly and enables seamless light, dark, and system theme switching.

Related Skills

Explore More Software Engineering Skills→
hunmerhunmer
70

convert-react-to-memento

Converts a React project into a Memento WebView-ready application.

Community
Intermediate
HieubkavHieubkav

ui-styling

Create accessible UI styling with shadcn/ui and Tailwind CSS for React applications.

Community
Advanced
excattexcatt
14

Artifacts Builder

Build multi-component React and TypeScript interfaces into a single bundle.html file.

Community
Advanced
wredziowredzio

tailwind-v4-shadcn

Configure Tailwind v4 theming with shadcn/ui in React + Vite projects.

Community
Advanced