tailwind-shadcn-setup

Automate Tailwind CSS and shadcn/ui setup by running scripts that install dependencies, initialize components.json, configure CSS variables for theming, and set up dark mode—supporting both App Router and Pages Router workflows in Next.js.

Yes, shadcn/ui integrates directly with Tailwind CSS in Next.js. This Skill automates the full setup including component library initialization, theme tokenization with CSS variables, and dark mode configuration for both routing strategies.

Configure dark mode by applying class-based or system-based approaches through automated setup scripts that integrate theme providers, CSS variables, and Tailwind configuration—ensuring consistent dark mode behavior across shadcn/ui components.

Set up design tokens by generating CSS variables, configuring theme files (globals.css, tailwind.config.ts, theme-provider.tsx), and scaffolding token structures—enabling consistent theming and design system alignment across shadcn/ui components.

No, this Skill automates the entire pipeline: installing Tailwind, PostCSS, and Autoprefixer; initializing shadcn/ui; generating configuration templates; and validating TypeScript support and CSS variable integration in one workflow.