LogoClawIndex
CasesSkillsAbout
LogoClawIndex

tailwind-v4-shadcn - Configure Tailwind v4 with shadcn/ui

Configures Tailwind CSS v4 with shadcn/ui using CSS variables, @theme mappings, base styles, and dark-mode patterns, and addresses documented migration errors.

Tags

Updated: 2026-10-05
Tailwind CSSTailwind CSS v4shadcn/uiReactVitedark modeCSS variables

Capabilities

Install Tailwind v4 dependenciesConfigure the Vite pluginDefine CSS theme variablesMap variables with @theme inline

Typical Inputs

React projectVite configurationTheme requirements

Typical Outputs

Updated package dependenciesVite configurationCSS theme definitions

What this skill does

  • Install Tailwind v4 dependencies
  • Configure the Vite plugin
  • Define CSS theme variables
  • Map variables with @theme inline
  • Set up automatic dark mode
  • Diagnose documented migration errors
  • Apply multi-theme @theme guidance

Inputs

  • React project
  • Vite configuration
  • Theme requirements
  • Existing Tailwind configuration
  • Existing CSS files

Outputs

  • Updated package dependencies
  • Vite configuration
  • CSS theme definitions
  • shadcn components configuration
  • Dark-mode theme behavior
  • Error-resolution guidance

Requirements

  • React project
  • Vite
  • pnpm package manager
  • Tailwind CSS v4
  • shadcn/ui

Source

  • Spec: SKILL.md

ClawIndex

OpenClaw Skills & Use Case Index

ClawIndex is an ecosystem-driven index of OpenClaw skills and real-world use cases.

Index

Skills·
Cases

Meta

About·
Disclaimer·
Email·
GitHub
© 2026 ClawIndex All Rights Reserved.