tailwind-v4-shadcn

Files (1)

• SKILL.md

SKILL.md (first lines)

# shadcn/ui with Tailwind CSS v4

## Overview

shadcn/ui fully supports Tailwind v4 and React 19. The CSS-variable system changed significantly — `@theme inline` replaces `tailwind.config.js`, colors are OKLCH, and several utilities were updated.

In a **Turborepo monorepo**, styles and components live in shared packages consumed by all apps.

---

## Turborepo Monorepo Architecture

Two packages work together:

| Package | Purpose |
|---------|---------|
| `packages/tailwind-config` | Shared PostCSS plugin config + base brand tokens |
| `packages/ui` | shadcn components + full `@theme inline` CSS |

Apps **never duplicate** PostCSS config or CSS tokens — they import from these packages.

### `packages/tailwind-config`

Exports a reusable PostCSS config and optional base brand tokens.

**`packages/tailwind-config/package.json`**
```json
{
  "name": "@pumplai/tw-config",
  "type": "module",
  "exports": {
    ".": "./shared-styles.css",
    "./postcss": "./postcss.config.js"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.x",
    "postcss": "^8.x",
    "tailwindcss": "^4.x"
  }
}
```

**`packages/tailwind-config/postcss.config.js`**
```js
export const postcssConfig = {
  plugins: { "@tailwindcss/postcss": {} },
};
```

**`packages/tailwind-config/shared-styles.css`** — brand tokens only (no shadcn tokens here):
```css
@import "tailwindcss";

@theme {
  --color-brand-50: oklch(0.97 0.02 270);
  --color-brand-500: oklch(0.55 0.22 270);
  --color-brand-600: oklch(0.47 0.22 270);
  --font-sans: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}
```

### `packages/ui` (shadcn components)

This is where shadcn components and their CSS live. The `globals.css` here is the single source of truth for all design tokens.

**`packages/ui/components.json`**
```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": { "config": "", "css": "src/styles/globals.css", "baseColor": "zinc", "cssVariables": true },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@pumplai/ui/components",
    "utils": "@pumplai/ui/lib/utils",
    "hooks": "@pumplai/ui/hooks",
    "lib": "@pumplai/ui/lib",
    "ui": "@pumplai/ui/components"
  }
}
```

**`packages/ui/src/styles/globals.css`** — full shadcn token setup:
```css
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  /* ... chart-1..5, sidebar tokens */
}

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  --destructive: oklch(0.577 0.245 27.325);

From ollieb89/openrepo, MIT.

More from ollieb89/openrepo