Sharing Tailwind CSS Configuration Across Packages in a Turborepo Monorepo

This guide shows how to share a Tailwind CSS configuration among multiple packages in a monorepo built with Turborepo and pnpm, eliminating the need to copy config files for each new package.

Directory Structure

The Turborepo template includes an apps folder for applications and a packages folder for reusable code. A typical layout looks like:

- apps
  - docs
  - web
- packages
  - ui
  - tsconfig
  - eslint-config-custom
  - tailwind-config   # shared Tailwind config
- package.json

Reusable packages (e.g., ui and tailwind-config ) go under packages , while business‑logic apps reside in apps .

Creating the Shared Config Package

First, create a tailwind-config folder inside packages and add a package.json :

{
  "name": "tailwind-config",
  "version": "0.0.0",
  "private": true,
  "main": "tailwind.config.ts",
  "types": "tailwind.config.ts"
}

Install Dependencies

Using pnpm, add Tailwind CSS to the new package:

pnpm add -F packages/tailwind-config tailwindcss

The -F flag is a short form of --filter , allowing you to target a specific workspace package.

Create the Configuration File

Inside packages/tailwind-config , create tailwind.config.ts (or .js ) with the shared settings:

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/**/*.{vue,js,ts,jsx,tsx,mdx}",
    "node_modules/ui/**/*.{vue,jsx,tsx}"
  ],
  // ...other Tailwind options
};

export default config;

The content array tells Tailwind where to look for class names, including the UI package to ensure its classes are processed.

Referencing the Shared Config

No Compilation Needed (e.g., UI library)

For packages like packages/ui that are not compiled, add the shared config as a devDependency:

"devDependencies": {
  "tailwind-config": "workspace:*"
}

Then create a tailwind.config.ts that re‑exports the shared preset:

import type { Config } from "tailwindcss";
import sharedConfig from "tailwind-config";

const config: Pick
= {
  presets: [sharedConfig]
};

export default config;

Compilation Required (e.g., Web app)

For compiled apps like apps/web , install Tailwind, PostCSS, and autoprefixer:

pnpm add -F apps/web tailwindcss postcss autoprefixer

Also add a postcss.config.js :

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
};

In your source, create a tailwind.css that imports Tailwind’s layers:

@tailwind base;
@tailwind components;
@tailwind utilities;

Import this CSS file in your application entry point.

Conclusion

Centralizing Tailwind configuration in a dedicated package provides a single source of truth for colors, fonts, and other design tokens across multiple projects, making large‑scale front‑end maintenance easier and more consistent.