CtrlK
BlogDocsLog inGet started
Tessl Logo

tailwind-v4-shadcn

Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns. Keywords: Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, dark mode, CSS variables, hsl() wrapper, components.json, React theming, theme switching, colors not working, variables broken, theme not applying, @plugin directive, typography plugin, forms plugin, prose class, @tailwindcss/typography, @tailwindcss/forms

88

1.55x
Quality

85%

Does it follow best practices?

Impact

92%

1.55x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

Evaluation results

100%

60%

Design System CSS Configuration

CSS variable architecture and @theme inline mapping

Criteria
Without context
With context

hsl() in :root

0%

100%

hsl() in .dark

0%

100%

:root at root level

100%

100%

.dark at root level

100%

100%

@theme inline present

0%

100%

@theme inline mapping

0%

100%

No double-wrap in @layer base

0%

100%

No nested @theme in .dark

100%

100%

@import tailwindcss present

100%

100%

Semantic color coverage

50%

100%

97%

15%

React + Tailwind v4 + shadcn/ui Project Bootstrap

Tailwind v4 Vite project setup and configuration files

Criteria
Without context
With context

@tailwindcss/vite import

100%

100%

vite plugins array

100%

100%

components.json config empty

100%

100%

No tailwind.config.ts

100%

100%

tsconfig path aliases

100%

100%

vite alias config

100%

100%

pnpm for shadcn init

0%

100%

No deprecated animation package

100%

100%

@types/node dev dep

100%

100%

tailwindcss + @tailwindcss/vite deps

100%

100%

Post-init cleanup note

0%

62%

80%

25%

Content Dashboard with Status Indicators

Tailwind v4 plugin syntax and semantic color tokens

Criteria
Without context
With context

@plugin for typography

100%

100%

No @import for plugin

100%

100%

Semantic destructive token

0%

100%

Semantic success token

0%

0%

Semantic warning token

0%

100%

No dark: on semantic colors

100%

100%

cn() for conditional classes

0%

0%

No @apply directive

100%

100%

Semantic color in @theme

50%

100%

prose class usage

100%

100%

Repository
secondsky/claude-skills
Evaluated
Agent
Claude Code
Model
Claude Sonnet 4.6

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.