Sharing Tailwind CSS and Components Across Apps in a Monorepo

Managing a monorepo can greatly streamline your development process, especially when sharing UI components across multiple applications. This guide focuses on setting up a UI package with Tailwind CSS and integrating it into your applications. For an extensive overview of setting up a monorepo with tools like Turbopack, Next.js, and more, you can refer to this detailed article.

Setting Up the UI Package with Tailwind in monorepo

Step 1: Create the UI Package

Create a new directory for the UI package within the packages directory of your monorepo.

cd packages
mkdir ui
cd ui
pnpm init

Step 2: Install Tailwind CSS and Dependencies

Install Tailwind CSS and other necessary dependencies for your UI package.

pnpm add -D tailwindcss postcss autoprefixer react @types/react @types/react-dom
pnpm add tailwindcss-animate class-variance-authority clsx tailwind-merge

Step 3: Initialize Tailwind CSS

Initialize Tailwind CSS by creating a configuration file.

npx tailwindcss init tailwind.config.ts

Step 4: Configure Tailwind CSS

Edit the tailwind.config.ts to include the paths of your components and pages that will use Tailwind CSS.

import type { Config } from 'tailwindcss';
import tailwindcssAnimate from 'tailwindcss-animate';

const config: Config = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    '../../apps/**/src/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [tailwindcssAnimate],
};

export default config;

Step 5: Set Up PostCSS

Create a postcss.config.mjs file to configure PostCSS to use Tailwind CSS.

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

export default config;

Step 6: Create a Global CSS File

Create a global CSS file that imports Tailwind’s base styles.

/* src/styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 7: Update the package.json

Update your package.json to include scripts for building and watching your Tailwind CSS files.

{
  "scripts": {
    "build:css": "postcss src/styles/globals.css -o dist/styles.css",
    "watch:css": "postcss src/styles/globals.css -o dist/styles.css --watch"
  },
  "exports": {
    "./globals.css": "./src/styles/globals.css",
    "./tailwind.config": "./tailwind.config.ts",
    "./postcss.config": "./postcss.config.mjs"
  }
}

Importing Tailwind CSS in the App Directory

Step 1: Link the UI Package

In your app (e.g., a Next.js app located in apps/web), ensure your project is linked to the UI package. Add a dependency to the UI package in the app’s package.json.

{
  "dependencies": {
    "@monorepo/ui": "workspace:*"
  }
}

Step 2: Import the Global CSS in layout.tsx

Import the global CSS file from the UI package in your app’s layout.tsx file.

// app/layout.tsx
import '@monorepo/ui/src/styles/globals.css';

export default function Layout({ children }) {
  return (
      {children}
  );
}

Step 3: Export Tailwind and PostCSS Configurations

In the web app, create a tailwind.config.ts and postcss.config.mjs to export configurations from the shared package.

// apps/web/tailwind.config.ts
export * from '@monorepo/ui/tailwind.config';

// apps/web/postcss.config.mjs
export * from '@monorepo/ui/postcss.config';

By following these steps, you set up a shared UI package with Tailwind CSS in your monorepo, facilitating style consistency and reducing redundancy. For further insights into setting up and managing monorepos, refer to the full guide.