skills.rest
mikemikula
mikemikulaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind-shadcn-setup

Configure Tailwind v4 and shadcn/ui dark-mode styling in Next.js projects.

2|1|Updated Feb 24, 2026
Search Tags:#next.js#tailwind#shadcn#dark-mode#cn-utility#globals.css
One-click install
npx skills add https://github.com/mikemikula/AI-Coding-Summit-2026 --skill tailwind-shadcn-setup-mikemikula
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-shadcn-setup
Source: https://github.com/mikemikula/AI-Coding-Summit-2026/tree/main/.cursor/skills/tailwind-shadcn-setup
Command: npx skills add https://github.com/mikemikula/AI-Coding-Summit-2026 --skill tailwind-shadcn-setup-mikemikula

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The tailwind-shadcn-setup skill eliminates confusion when configuring Tailwind v4 and shadcn/ui inside this dark-mode Next.js project by documenting the CSS-first approach, globals.css theming, cn utility usage, and component guidance.

Core Features & Use Cases

  • CSS-first Tailwind v4 configuration keeps styling in globals.css with @import statements, @theme blocks, and custom vars instead of tailwind.config.js and @tailwind directives.
  • Dark-only shadcn/ui conventions enforce the zinc/slate palette, forced <html className="dark"> layout, no dark: variants, and using generated components for buttons, inputs, selects, checkboxes, skeletons, toasts, and badges.
  • Utility guidance and rules highlight the cn() helper, forbid inline styles or !important flags, and remind maintainers to extend shadcn components rather than editing generated files.

Quick Start

Apply the tailwind-shadcn-setup instructions to align globals.css and layout.tsx with the project's dark-mode conventions.

Frequently Asked Questions about tailwind-shadcn-setup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure Tailwind v4 with shadcn/ui for a dark-mode Next.js project?▼

Configure Tailwind v4 and shadcn/ui for dark-mode Next.js by using a CSS-first approach in globals.css with @theme blocks, forcing the html.dark layout, and applying the zinc/slate palette without dark: variants.

Do I need tailwind.config.js for Tailwind v4 theming with shadcn components?▼

Tailwind v4 theming with shadcn components does not require tailwind.config.js, instead utilizing CSS-first configuration in globals.css with @import statements and custom variables for styling.

How does the cn utility work when styling shadcn/ui components?▼

The cn utility merges class names for shadcn/ui components, requiring maintainers to extend generated component files rather than editing them directly, while forbidding inline styles and !important flags.

Can I use light and dark mode variants for shadcn buttons and toasts in Next.js?▼

Dark-only shadcn/ui conventions enforce a forced dark layout without light mode variants, applying the zinc/slate palette to generated buttons, toasts, and other components for consistent Next.js theming.

Why are my shadcn component styles not applying correctly in globals.css?▼

shadcn component styles fail when using inline styles or !important flags instead of the cn utility, or by editing generated files instead of extending them through the CSS-first Tailwind v4 setup.

What is the best way to install shadcn/ui components in a Tailwind v4 Next.js app?▼

Install shadcn/ui components in a Tailwind v4 Next.js app by generating buttons, inputs, selects, and toasts, then extending them via the cn helper while maintaining the dark-mode globals.css theme.

Related Skills

Explore More Software Engineering Skills→
Yoriichi-DangYoriichi-Dang

tailwind-v4-shadcn

Migrate React projects to Tailwind v4 with shadcn/ui using CSS-first theming.

Community
Advanced
mikemikulamikemikula
2

todo-components

Enforce dark-mode Todo component conventions with shadcn/ui and Suspense loaders.

Community
Intermediate
ManuelvillarvieitesManuelvillarvieites

shadcn-ui-theme

Apply pre-configured shadcn/ui themes by replacing CSS variables in app/globals.css.

Community
Basic
blencorpblencorp
101

tailwindcss

Provide Tailwind CSS v4 utility-first guidance for responsive UI styling.

Official
Intermediate