skills.rest
jackspace
jackspaceCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-v4-shadcn

Bootstrap Tailwind v4 and shadcn/ui projects with dark mode and CSS variables.

16|7|Updated Nov 20, 2025
Search Tags:#react#shadcn/ui#vite#css variables#tailwind v4
One-click install
npx skills add https://github.com/jackspace/ClaudeSkillz --skill tailwind-v4-shadcn-jackspace
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/jackspace/ClaudeSkillz/tree/main/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/jackspace/ClaudeSkillz --skill tailwind-v4-shadcn-jackspace

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a production-tested setup for Tailwind v4 with shadcn/ui, including a clean architecture, dark mode, CSS variables, and empty config conventions.

Core Features & Use Cases

  • Clean v4 architecture with @theme inline
  • Dark mode via ThemeProvider
  • Templates to bootstrap Vite + React + TS
  • Prevention of common v4 gotchas
  • Production-tested patterns for components and styling

Quick Start

Copy templates and follow SKILL.md step-by-step to bootstrap a project.

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

Tailwind v4 with shadcn/ui requires a 4-step architecture: configure CSS variables, use @theme inline mappings, integrate ThemeProvider for dark mode, and maintain an empty Tailwind config. This Skill provides templates and step-by-step SKILL.md guidance to bootstrap production-ready projects.

Can I migrate an existing Tailwind v3 project to v4 without breaking my component styles?▼

Yes. Tailwind v4 migration requires updating CSS variable syntax, @theme directives, and @plugin usage. This Skill addresses common v4 gotchas, provides hsl() color wrapper patterns, and delivers ready-to-copy templates to migrate Vite + React + TypeScript projects safely.

How do I implement dark mode with Tailwind v4 and shadcn/ui?▼

Dark mode in Tailwind v4 integrates via ThemeProvider, CSS variables, and @theme inline mappings. This Skill includes production-tested dark mode setup patterns, CSS variable architecture, and templates that work with shadcn/ui components.

What are common Tailwind v4 configuration mistakes with shadcn/ui?▼

Common issues include incorrect @theme syntax, improper @plugin directives, missing CSS variable wrappers, and non-empty config files. This Skill prevents these gotchas by providing validated architecture patterns, empty config conventions, and hsl() color wrapper examples.

Does this setup work with TypeScript and Vite for production environments?▼

Yes. This Skill is production-tested for Vite + React + TypeScript stacks. It satisfies functional and technical requirements including 4-step architecture, proper @plugin directives, ThemeProvider integration, and CSS variable management for production deployments.

Related Skills

Explore More Design & Creative Skills→
mendoza000mendoza000

tailwind-v4-shadcn

Automate Tailwind v4 and shadcn/ui setup in React projects.

Community
Intermediate
zaid-khan-codezaid-khan-code
3

shadcn-ui-setup

Set up Shadcn UI components with dark mode in Next.js.

Community
Intermediate
PallepadehatPallepadehat
1

tailwind-v4-shadcn

Automate Tailwind v4 and shadcn/ui setup in Vite React projects.

Community
Advanced
Asymmetric-alAsymmetric-al
417

tailwind-v4-shadcn

Configure Tailwind CSS v4 with shadcn/ui using CSS variables for theming.

Official
Advanced