# Source: https://turbo.build/guides/tools/tailwind.md

# Tailwind CSS

<CopyPrompt
  title="Set up Tailwind CSS in a Turborepo"
  prompt={
  "Set up Tailwind CSS in this Turborepo.\n1) Create a shared Tailwind config package\n2) Configure the UI package to use it\n3) Set up applications to use the styles\n\nWalk me through each step."
}
/>

[Tailwind CSS](https://tailwindcss.com/) 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](https://github.com/vercel/turborepo/tree/main/examples/with-tailwind).

<PackageManagerTabs>
  <Tab value="pnpm">
    ```bash title="Terminal"
    pnpm dlx create-turbo@latest -e with-tailwind
    ```
  </Tab>

  <Tab value="yarn">
    ```bash title="Terminal"
    yarn dlx create-turbo@latest -e with-tailwind
    ```
  </Tab>

  <Tab value="npm">
    ```bash title="Terminal"
    npx create-turbo@latest -e with-tailwind
    ```
  </Tab>

  <Tab value="bun">
    ```bash title="Terminal"
    bunx create-turbo@latest -e with-tailwind
    ```
  </Tab>
</PackageManagerTabs>

## Guide

<Callout type="info">
  This guide is for Tailwind CSS v4.
</Callout>

<Steps>
  <Step>
    ### Create a monorepo

    If you don't have an existing project, use [create-turbo](/docs/getting-started/installation) to create a new monorepo:

    <PackageManagerTabs>
      <Tab value="pnpm">
        ```bash title="Terminal"
        pnpm dlx create-turbo@latest
        ```
      </Tab>

      <Tab value="yarn">
        ```bash title="Terminal"
        yarn dlx create-turbo@latest
        ```
      </Tab>

      <Tab value="npm">
        ```bash title="Terminal"
        npx create-turbo@latest
        ```
      </Tab>

      <Tab value="bun">
        ```bash title="Terminal"
        bunx create-turbo@latest
        ```
      </Tab>
    </PackageManagerTabs>
  </Step>

  <Step>
    ### Add Tailwind CSS to your application

    [Follow Tailwind CSS's guides](https://tailwindcss.com/docs/installation/using-vite) to set up Tailwind CSS for your frontend framework.

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

  <Step>
    ### Create a shared Tailwind CSS configuration package

    First, build an [Internal Package](https://turborepo.dev/docs/core-concepts/internal-packages) with four files:

    <Tabs items={["package.json", "shared-styles.css", "postcss.config.js (Optional)"]}>
      <Tab value="package.json">
        This `package.json` installs Tailwind CSS so we can create the file shared styles and export for the rest of the repository.

        ```json title="./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"
          }
        }
        ```
      </Tab>

      <Tab value="shared-styles.css">
        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.

        ```css title="./packages/tailwind-config/shared-styles.css"
        @import "tailwindcss";

        @theme {
          --blue-1000: #2a8af6;
          --purple-1000: #a853ba;
          --red-1000: #e92a67;
        }
        ```
      </Tab>

      <Tab value="postcss.config.js (Optional)">
        If your frontends need a PostCSS configuration file, you can create one to share.

        ```js title="./packages/tailwind-config/postcss.config.js"
        export const postcssConfig = {
          plugins: {
            "@tailwindcss/postcss": {},
          },
        };
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ### 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](https://github.com/vercel/turborepo/tree/main/examples/with-tailwind/packages/ui). The files required for your Tailwind CSS setup are below.

    <Tabs items={["package.json", "turbo.json", "styles.css"]}>
      <Tab value="package.json">
        The `package.json` installs the dependencies for the package, sets up scripts for development and build environments, and marks the exports for the package.

        ```json title="./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"
          }
        }
        ```

        <Callout type="info">
          Above, we've only included the code related to setting up Tailwind. The full
          package.json is
          [here](https://github.com/vercel/turborepo/tree/main/examples/with-tailwind/packages/ui/package.json).
        </Callout>
      </Tab>

      <Tab value="turbo.json">
        Create a `build` and `dev` task that runs the scripts for building of components and style sheets in parallel.

        ```json title="./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
            }
          }
        }
        ```
      </Tab>

      <Tab value="styles.css">
        This `styles.css` contains component-level styles for the shared UI library.

        ```css title="./packages/ui/src/styles.css"
        /* Component-level styles for the UI package */
        @import "tailwindcss" prefix(ui);
        ```

        <Callout type="info">
          Tailwind classes used in this package should be prefixed with `ui:` to avoid
          style specificity issues.
        </Callout>
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ### Use the UI package in an application

    Install the packages you've created into your application.

    <PackageManagerTabs>
      <Tab value="pnpm">
        ```bash title="Terminal"
        pnpm add @repo/ui @repo/tailwind-config --save-dev --filter=@repo/ui --filter=web
        ```
      </Tab>

      <Tab value="yarn">
        ```bash title="Terminal"
        yarn workspace web add @repo/ui @repo/tailwind-config --dev
        yarn workspace @repo/ui add @repo/ui @repo/tailwind-config --dev
        ```
      </Tab>

      <Tab value="npm">
        ```bash title="Terminal"
        npm install @repo/ui @repo/tailwind-config --workspace=web --workspace=@repo/ui --save-dev
        ```
      </Tab>

      <Tab value="bun">
        ```bash title="Terminal"
        cd apps/web && bun install @repo/ui @repo/tailwind-config --dev
        cd packages/ui && bun install @repo/ui @repo/tailwind-config --dev
        ```
      </Tab>
    </PackageManagerTabs>

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

    <Tabs items={["globals.css", "layout.tsx", "postcss.config.js (Optional)"]}>
      <Tab value="globals.css">
        ```css title="./apps/web/app/globals.css"
        @import "tailwindcss";
        @import "@repo/tailwind-config";
        ```
      </Tab>

      <Tab value="layout.tsx">
        ```tsx title="./apps/web/app/layout.tsx"
        import "@repo/ui/styles.css";
        import "./globals.css";
        ```
      </Tab>

      <Tab value="postcss.config.js (Optional)">
        ```js title="./apps/web/postcss.config.js"
        import { postcssConfig } from "@repo/tailwind-config/postcss";

        export default postcssConfig;
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

---

[View full sitemap](/sitemap.md)