Tailwind Config

Package

packages/config-tailwind — the shared design token source for all apps in the monorepo.

File Structure

packages/config-tailwind/
├── package.json
└── theme.css        ← Tailwind v4 @theme block

theme.css

packages/config-tailwind/theme.css

@theme {
  /* Brand colors */
  --color-brand-red:      #C0392B;
  --color-brand-dark:     #0A0A0A;
  --color-brand-charcoal: #1A1A1A;
  --color-brand-gray:     #2D2D2D;

  /* Typography */
  --font-family-sans: var(--font-sans), system-ui, sans-serif;
  --font-family-mono: var(--font-mono), monospace;
}

Consuming in an App

In your app’s global CSS file, import Tailwind v4 and the shared theme:

apps/www/app/globals.css

@import "tailwindcss";
@import "@brettjohnson/config-tailwind/theme.css";

This makes the following Tailwind utilities available:

Utility prefix	Token
bg-brand-red	#C0392B
text-brand-red	#C0392B
border-brand-red	#C0392B
bg-brand-dark	#0A0A0A
bg-brand-charcoal	#1A1A1A
border-brand-gray	#2D2D2D
font-sans	Inter → system-ui
font-mono	JetBrains Mono → monospace

Package Export

packages/config-tailwind/package.json

{
  "name": "@brettjohnson/config-tailwind",
  "exports": {
    "./theme.css": "./theme.css"
  }
}

Adding New Tokens

1. Add the token to packages/config-tailwind/theme.css inside the @theme {} block
2. Follow the naming convention: --color-brand-*, --font-family-*, --spacing-*
3. Open a PR with the token addition and update this docs page
4. After merge, the token is available in all apps automatically (no per-app config change required)

Caution

Do not add one-off tokens per-app. If a token is needed in one app today, it is likely needed in others tomorrow. Add it to the shared theme package.

Tailwind Version

This project uses Tailwind CSS v4. The @theme directive is a v4 concept — it replaces tailwind.config.js for token definition. There is no tailwind.config.js file in this repo.

If you are referencing Tailwind v3 documentation, note that the extend.colors approach is not used here. All tokens are defined as CSS custom properties in @theme {}.