skills.rest
FEMADOX
FEMADOXCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-v4-shadcn

Configure Tailwind v4 and shadcn/ui with Vite and React templates.

4|Updated Feb 20, 2026
Search Tags:#theming#react#vite#tailwind#shadcn-ui#dark-mode#tailwind-v4
One-click install
npx skills add https://github.com/FEMADOX/Fastapi-Ecosystem-Lab --skill tailwind-v4-shadcn-femadox
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/FEMADOX/Fastapi-Ecosystem-Lab/tree/main/learn_nextjs/.agents/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/FEMADOX/Fastapi-Ecosystem-Lab --skill tailwind-v4-shadcn-femadox

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind v4 + shadcn/ui projects often require careful setup to ensure dark mode, semantic token mapping, and correct plugin usage; this skill provides production-tested patterns and templates to streamline and standardize that setup across React apps.

Core Features & Use Cases

  • Production-tested setup patterns for Tailwind v4 and shadcn/ui
  • Ready-to-use Vite + React + TypeScript configuration templates
  • Guidance for dark mode, CSS variables, and theme integration in real-world projects

Quick Start

Create a new Vite + React project and apply the provided Tailwind v4 + shadcn UI templates to establish a solid foundation.

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

To set up Tailwind v4 with shadcn/ui, you must configure Vite and React, map variables using @theme inline, remove tailwind.config.ts, and load plugins via @plugin directives.

Do I need to remove tailwind.config.ts when migrating to Tailwind v4 for shadcn/ui?▼

Yes, you need to remove tailwind.config.ts when migrating to Tailwind v4. This setup enforces loading plugins via @plugin directives and mapping variables with @theme inline instead.

How does dark mode theming work with shadcn/ui and Tailwind v4?▼

Dark mode theming with shadcn/ui and Tailwind v4 works by applying production-tested patterns for CSS variables and semantic token mapping using the @theme inline directive.

Can I use this Tailwind v4 and shadcn/ui setup for migrating an existing React app?▼

Yes, you can use this setup for both new projects and migrations. It provides ready-to-use Vite, React, and TypeScript configuration templates to standardize your frontend stack.

What's the best way to configure Tailwind v4 plugins for a shadcn/ui stack?▼

The best way to configure Tailwind v4 plugins for a shadcn/ui stack is by loading them directly via @plugin directives, which replaces the old tailwind.config.ts configuration method.

Why are my semantic tokens not mapping correctly in Tailwind v4 with shadcn/ui?▼

Semantic tokens fail to map correctly in Tailwind v4 if you do not use the @theme inline directive for variable mapping, a core technical requirement for standardizing the shadcn/ui stack.

Related Skills

Explore More Software Engineering Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
marcioaltoemarcioaltoe
14

ui-designer

Design and implement accessible React UI components with shadcn/ui and Tailwind CSS.

Community
Intermediate
GitCoder052023GitCoder052023
1

tailwind-v4-shadcn

Configure Tailwind v4 with shadcn/ui for React projects using CSS-first theming.

Community
Advanced
lexand-devlexand-dev

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 and react-native-css in Expo projects.

Community
Intermediate