tailwind-v4-shadcn

Configure Tailwind CSS v4 with shadcn/ui in a Turborepo monorepo.

Updated Feb 18, 2026

Search Tags:#frontend #react #css #shadcn/ui #monorepo #tailwind #turborepo

Ready to run

npx skills add https://github.com/ollieb89/openrepo --skill tailwind-v4-shadcn-ollieb89

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tailwind-v4-shadcn
Source: https://github.com/ollieb89/openrepo/tree/main/.agents/skills/tailwind-v4-shadcn
Command: npx skills add https://github.com/ollieb89/openrepo --skill tailwind-v4-shadcn-ollieb89

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, shadcn-ui, and includes references (resource) components.

What problem does it solve?

This Skill simplifies the process of installing, configuring, and extending Tailwind CSS v4 with shadcn/ui, especially within complex Turborepo monorepo architectures.

Core Features & Use Cases

Monorepo Setup: Guides through setting up shared packages/tailwind-config and packages/ui for consistent styling across multiple applications.
Tailwind v4 Configuration: Explains the new @theme inline CSS format, OKLCH colors, and updated utility classes.
shadcn/ui Integration: Details the components.json setup, aliasing, and how to add/import shadcn components in a monorepo.
Use Case: You are setting up a new Next.js project using Turborepo and want to integrate shadcn/ui with the latest Tailwind CSS v4. This Skill provides the exact configuration steps for shared packages and individual apps.

Quick Start

Use the tailwind-v4-shadcn skill to add the 'button' component to your monorepo's ui package.

Frequently Asked Questions about tailwind-v4-shadcn

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

FAQPage Schema

How do I set up Tailwind CSS v4 with shadcn/ui in a Turborepo monorepo?▼

Setting up Tailwind v4 with shadcn/ui in a Turborepo requires configuring shared `packages/tailwind-config` and `packages/ui` directories. You must establish PostCSS configurations, CSS tokens, and a `components.json` file for aliasing to ensure consistent styling across all monorepo applications.

What are the Tailwind v4 breaking changes I need to address when integrating shadcn/ui?▼

Tailwind v4 breaking changes impact shadcn/ui integration by requiring migration to the new `@theme inline` CSS format, adoption of OKLCH colors, and updates to utility classes. Configuring shared package structures correctly ensures these styling updates propagate across your monorepo applications.

Can I use shadcn/ui CLI commands to add components to a shared monorepo package?▼

Yes, you can use monorepo-aware shadcn/ui CLI commands to add components directly to a shared package. By properly configuring your `components.json` file with the correct path aliases, the CLI targets your `packages/ui` directory, making components available across all apps.

Does Tailwind CSS v4 work with Next.js and Turborepo for shared UI components?▼

Tailwind CSS v4 works seamlessly with Next.js and Turborepo for shared UI components by utilizing a shared `packages/tailwind-config` and `packages/ui` structure. This architecture ensures that individual apps consume consistent styling tokens and component libraries without configuration duplication.

Why is my shadcn/ui component styling breaking after upgrading to Tailwind CSS v4?▼

shadcn/ui styling breaks after upgrading to Tailwind CSS v4 because of breaking changes from Tailwind v3, primarily involving the new `@theme inline` CSS format and OKLCH color definitions. Updating your shared CSS token configuration and utility classes resolves these rendering issues.