Setup Tailwind CSS and shadcn/ui component library for Next.js projects. Use when configuring Tailwind CSS, installing shadcn/ui, setting up design tokens, configuring dark mode, initializing component library, or when user mentions Tailwind setup, shadcn/ui installation, component system, design system, or theming.
Limited to specific tools
Additional assets for this skill
This skill is limited to using the following tools:
README.mdexamples/root-layout.tsxexamples/sample-form.tsxexamples/theme-showcase.tsxexamples/theme-toggle.tsxscripts/init-shadcn.shscripts/install-tailwind.shscripts/setup-dark-mode.shscripts/setup-theme.shtemplates/components.jsontemplates/globals.csstemplates/postcss.config.mjstemplates/tailwind.config.tstemplates/theme-provider.tsxThis skill provides complete setup and configuration for Tailwind CSS and shadcn/ui in Next.js projects. It covers installation, configuration, theming, dark mode, and component integration following modern best practices.
Install and configure Tailwind CSS for Next.js:
# Run automated installation script
bash ./skills/tailwind-shadcn-setup/scripts/install-tailwind.sh
# Or manually install dependencies
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
What This Does:
tailwind.config.ts and postcss.config.mjsInitialize shadcn/ui component library:
# Run automated shadcn/ui setup
bash ./skills/tailwind-shadcn-setup/scripts/init-shadcn.sh
# Or use shadcn CLI directly
npx shadcn@latest init
Configuration Prompts:
What Gets Created:
components.json - shadcn/ui configurationlib/utils.ts - Utility functions (cn helper)app/globals.css - CSS variables and theme definitionsConfigure design tokens using CSS variables:
# Apply comprehensive theme configuration
bash ./skills/tailwind-shadcn-setup/scripts/setup-theme.sh
Theme Configuration Includes:
Using CSS Variables Template:
// Copy and customize base theme
cp ./skills/tailwind-shadcn-setup/templates/globals.css app/globals.css
Color System:
Set up dark mode with class-based or system-based detection:
# Configure dark mode
bash ./skills/tailwind-shadcn-setup/scripts/setup-dark-mode.sh
Dark Mode Strategies:
.dark class for manual toggleProvider Setup:
// Copy theme provider template
cp ./skills/tailwind-shadcn-setup/templates/theme-provider.tsx components/theme-provider.tsx
Theme Toggle Component:
# Add theme toggle button
npx shadcn@latest add dropdown-menu
cp ./skills/tailwind-shadcn-setup/examples/theme-toggle.tsx components/theme-toggle.tsx
Install shadcn/ui components as needed:
# Add individual components
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add input
npx shadcn@latest add form
# Add multiple components at once
npx shadcn@latest add button card input form dialog sheet
Common Component Sets:
Create custom components using shadcn/ui primitives:
// Example: Custom button variant
import { Button } from "@/components/ui/button"
<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
Extending Components:
// Add custom variants in tailwind.config.ts
// Components automatically use CSS variables for theming
# 1. Install Tailwind CSS
bash ./skills/tailwind-shadcn-setup/scripts/install-tailwind.sh
# 2. Initialize shadcn/ui
bash ./skills/tailwind-shadcn-setup/scripts/init-shadcn.sh
# 3. Setup theme and dark mode
bash ./skills/tailwind-shadcn-setup/scripts/setup-dark-mode.sh
# 4. Add common components
npx shadcn@latest add button card input form dialog toast
# 5. Copy theme toggle component
cp ./skills/tailwind-shadcn-setup/examples/theme-toggle.tsx components/theme-toggle.tsx
Result: Fully configured Next.js project with Tailwind, shadcn/ui, dark mode, and essential components
# 1. Run theme setup
bash ./skills/tailwind-shadcn-setup/scripts/setup-theme.sh
# 2. Edit CSS variables for brand colors
# Modify app/globals.css to use your brand colors
# Example: Primary color = oklch(0.5 0.2 250) for brand blue
# 3. Test theme with sample components
cp ./skills/tailwind-shadcn-setup/examples/theme-showcase.tsx app/page.tsx
Result: Custom-branded design system using your colors while maintaining shadcn/ui components
# 1. Complete base setup
bash ./skills/tailwind-shadcn-setup/scripts/install-tailwind.sh
bash ./skills/tailwind-shadcn-setup/scripts/init-shadcn.sh
# 2. Add all form-related components
npx shadcn@latest add form input label select textarea checkbox radio-group switch slider
# 3. Install react-hook-form and zod (form dependencies)
npm install react-hook-form zod @hookform/resolvers
# 4. Copy form example template
cp ./skills/tailwind-shadcn-setup/examples/sample-form.tsx components/forms/sample-form.tsx
Result: Complete form setup with validation, accessibility, and consistent styling
Dependencies:
Package Manager:
Project Structure:
create-next-appapp/ directory (App Router) or pages/ directory (Pages Router)components/ directory for UI componentslib/ directory for utilitiesFor Dark Mode:
next-themes package (automatically installed by shadcn CLI)tailwind.config.ts:
import type { Config } from "tailwindcss"
const config: Config = {
darkMode: ["class"],
content: [
"./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./app/**/*.{ts,tsx}",
"./src/**/*.{ts,tsx}",
],
theme: {
extend: {
// CSS variable-based theming
},
},
plugins: [require("tailwindcss-animate")],
}
export default config
components.json:
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "slate",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
app/globals.css:
:root variables for light mode.dark variables for dark modeCSS Variables Over Utility Classes:
cssVariables: true in components.jsonComponent Organization:
components/
├── ui/ # shadcn/ui components (auto-generated)
│ ├── button.tsx
│ ├── card.tsx
│ └── input.tsx
├── theme-provider.tsx
├── theme-toggle.tsx
└── [custom-components]/
Theming Strategy:
Performance:
Dark Mode UX:
Server Components:
'use client')Route Handlers:
Metadata API:
Plugin: nextjs-frontend Version: 1.0.0 Category: UI & Styling Skill Type: Setup & Configuration