Tailwind + shadcn/ui Setup for Next.js 16

Overview

Configure a production-ready Tailwind CSS (v3/v4) + shadcn/ui setup for Next.js 16 App Router projects. This skill automates dependency installation, configuration, component generation, and provides:

• Tailwind CSS v4-ready configuration (v3 with forward-compatible patterns)
• shadcn/ui components (Radix UI-based, fully accessible)
• Dark mode with next-themes (class strategy)
• Base application layout (header, optional sidebar, responsive)
• Design token system (CSS variables for easy theming)
• Accessibility defaults (WCAG 2.1 AA compliant)
• Example pages (forms, dialogs, theme showcase)

Prerequisites

Before running this skill, verify: