Turbo Mono with Tailwind

I'll help you set up a Turborepo monorepo with Tailwind CSS v4.1. There's actually a ready-made template for this exact setup.

Quick Start with Template

The fastest way to get started is using the official Tailwind CSS + Turborepo template 1:

pnpm dlx create-turbo@latest -e with-tailwind

This template comes pre-configured with Tailwind CSS v4 and follows best practices for monorepo structure.

Manual Setup Guide

If you prefer to set it up manually, here's the step-by-step process 1:

1. Create the Monorepo

pnpm dlx create-turbo@latest

2. Create Shared Tailwind Configuration Package

Create a shared Tailwind config package at ./packages/tailwind-config/:

package.json:

{
  "name": "@repo/tailwind-config",
  "version": "0.0.0",
  "type": "module",
  "private": true,
  "exports": {
    ".": "./shared-styles.css",
    "./postcss": "./postcss.config.js"
  },
  "devDependencies": {
    "postcss": "^8.5.3",
    "tailwindcss": "^4.1.5"
  }
}

shared-styles.css:

@import 'tailwindcss';

3. Create UI Package

Set up your UI package at ./packages/ui/ with the following package.json 1:

{
  "name": "@repo/ui",
  "version": "0.0.0",
  "exports": {
    "./styles.css": "./dist/index.css",
    "./*": "./dist/*.js"
  },
  "scripts": {
    "build:styles": "tailwindcss -i ./src/styles.css -o ./dist/index.css",
    "build:components": "tsc",
    "dev:styles": "tailwindcss -i ./src/styles.css -o ./dist/index.css --watch",
    "dev:components": "tsc --watch"
  },
  "devDependencies": {
    "@repo/tailwind-config": "workspace:*",
    "@tailwindcss/cli": "^4.1.5",
    "@tailwindcss/postcss": "^4.1.5",
    "autoprefixer": "^10.4.20",
    "tailwindcss": "^4.1.5"
  }
}

4. Configure Applications

In your applications (e.g., ./apps/web/), install the packages:

pnpm add @repo/ui @repo/tailwind-config --save-dev --filter=web

Then configure your globals.css 1:

@import 'tailwindcss';
@import '@repo/tailwind-config';
@import '@repo/ui/styles.css';

Key Benefits

Shared Design System: Consistent styling across all apps
Hot Reloading: Changes to UI components reflect immediately
Optimized Builds: Turborepo's caching speeds up builds
Type Safety: Full TypeScript support across packages

The template approach is recommended as it includes additional optimizations and follows the latest best practices for Turborepo + Tailwind CSS v4 integration 12.