Tailwind CSS

Tailwind CSS is a CSS framework that allows you to rapidly build modern websites without ever leaving your HTML.

Quickstart

If you'd rather use a template, this guide is walking through how to build this Tailwind CSS + Turborepo template.

Terminal

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

Terminal

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

Terminal

npx create-turbo@latest -e with-tailwind

Terminal

bunx create-turbo@latest -e with-tailwind

Guide

This guide is for Tailwind CSS v4.

Create a monorepo

If you don't have an existing project, use create-turbo to create a new monorepo:

Terminal

pnpm dlx create-turbo@latest

Terminal

yarn dlx create-turbo@latest

Terminal

npx create-turbo@latest

Terminal

bunx create-turbo@latest

Add Tailwind CSS to your application

Follow Tailwind CSS's guides to set up Tailwind CSS for your frontend framework.

Once completed, you can start working on bringing your UI package into the applications.

Create a shared Tailwind CSS configuration package

First, build an Internal Package with four files:

This package.json installs Tailwind CSS so we can create the file shared styles and export for the rest of the repository.

./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"
  }
}

This shared-styles.css file will be shared to the libraries and applications in the repository. The variables shown will be available anywhere that the file is included.

./packages/tailwind-config/shared-styles.css

@import "tailwindcss";

@theme {
  --blue-1000: #2a8af6;
  --purple-1000: #a853ba;
  --red-1000: #e92a67;
}

If your frontends need a PostCSS configuration file, you can create one to share.

./packages/tailwind-config/postcss.config.js

export const postcssConfig = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Create the UI package

You can now build the components to share to your applications.

For a full example, visit the source code for @repo/ui package in the Tailwind CSS example. The files required for your Tailwind CSS setup are below.

The package.json installs the dependencies for the package, sets up scripts for development and build environments, and marks the exports for the package.

./packages/ui/package.json

{
  "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"
  }
}

Above, we've only included the code related to setting up Tailwind. The full package.json is here.

Create a build and dev task that runs the scripts for building of components and style sheets in parallel.

./packages/ui/turbo.json

{
  "extends": ["//"],
  "tasks": {
    "build": {
      "dependsOn": ["build:styles", "build:components"]
    },
    "build:styles": {
      "outputs": ["dist/**"]
    },
    "build:components": {
      "outputs": ["dist/**"]
    },
    "dev": {
      "with": ["dev:styles", "dev:components"]
    },
    "dev:styles": {
      "cache": false,
      "persistent": true
    },
    "dev:components": {
      "cache": false,
      "persistent": true
    }
  }
}

This styles.css contains component-level styles for the shared UI library.

./packages/ui/src/styles.css

/* Component-level styles for the UI package */
@import "tailwindcss" prefix(ui);

Tailwind classes used in this package should be prefixed with ui: to avoid style specificity issues.

Use the UI package in an application

Install the packages you've created into your application.

Terminal

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

Terminal

yarn workspace web add @repo/ui @repo/tailwind-config --dev
yarn workspace @repo/ui add @repo/ui @repo/tailwind-config --dev

Terminal

npm install @repo/ui @repo/tailwind-config --workspace=web --workspace=@repo/ui --save-dev

Terminal

cd apps/web && bun install @repo/ui @repo/tailwind-config --dev
cd packages/ui && bun install @repo/ui @repo/tailwind-config --dev

Then, configure the files in your application so the styles from the UI package are reflected in the application.

./apps/web/app/globals.css

@import "tailwindcss";
@import "@repo/tailwind-config";

./apps/web/app/layout.tsx

import "@repo/ui/styles.css";
import "./globals.css";

./apps/web/postcss.config.js

import { postcssConfig } from "@repo/tailwind-config/postcss";

export default postcssConfig;

Tailwind CSS

Quickstart

Guide

Create a monorepo

Add Tailwind CSS to your application

Create a shared Tailwind CSS configuration package

Create the UI package

Use the UI package in an application

On this page