tailwind-setup

Tailwind CSS setup with shadcn/ui involves installing dependencies, configuring Vite with the Tailwind plugin, updating your CSS entry point, creating shadcn scaffolding files (components.json, jsconfig.json), and wrapping your app with ThemeProvider. This Skill automates those steps and verifies the build.

Yes. This Skill configures shadcn/ui with class-based dark mode by applying theme tokens to your Tailwind config, adding a ThemeContext and ThemeToggle component, and enabling theme switching across your entire app without manual style overrides.

Path aliases are set up in vite.config.js and jsconfig.json to enable clean imports like @/components. This Skill configures both files so @ resolves to your src directory, reducing relative path complexity in large projects.

Tailwind CSS setup requires tailwindcss, autoprefixer, shadcn/ui core dependencies, and the Vite Tailwind plugin. This Skill installs all dependencies, updates your build config, and verifies the setup with an npm build check.

This Skill applies to both new and existing React + Vite projects. It updates your Vite config, replaces your CSS entry, scaffolds shadcn files, and integrates ThemeProvider without requiring a fresh setup.

Tailwind with shadcn/ui provides utility-first styling, component-level dark mode support, and rapid design consistency through pre-built shadcn components. Tailwind's token system and dark mode strategy integrate seamlessly with shadcn's class-based approach for maintainable, themeable UIs.