tailwind-shadcn-setup

# tailwind-shadcn-setup

## Instructions

This 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.

### 1. Tailwind CSS Installation

Install and configure Tailwind CSS for Next.js:

```bash
# 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:**
- Installs Tailwind CSS, PostCSS, and Autoprefixer
- Creates `tailwind.config.ts` and `postcss.config.mjs`
- Configures content paths for Next.js
- Sets up CSS imports in global styles

### 2. shadcn/ui Initialization

Initialize shadcn/ui component library:

```bash
# 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:**
- TypeScript: Yes (recommended)
- Style: Default or New York
- Base color: Slate, Zinc, Neutral, Stone, or Gray
- CSS variables: Yes (recommended for theming)
- Tailwind config: tailwind.config.ts
- Components location: @/components
- Utils location: @/lib/utils

**What Gets Created:**
- `components.json` - shadcn/ui configuration
- `lib/utils.ts` - Utility functions (cn helper)
- `app/globals.css` - CSS variables and theme definitions
- Base component structure

### 3. Design Tokens & Theme Configuration

Configure design tokens using CSS variables:

```bash
# Apply comprehensive theme configuration
bash ./skills/tailwind-shadcn-setup/scripts/setup-theme.sh
```

**Theme Configuration Includes:**
- Primary, secondary, accent colors
- Background and foreground pairs
- Border, input, ring colors
- Muted, destructive, card, popover colors
- Chart colors (chart-1 through chart-5)
- Sidebar colors for navigation components

**Using CSS Variables Template:**