ContextQMD
Back to Turborepo

Tailwind CSS

apps/docs/content/docs/guides/tools/tailwind.mdx

2.10.06.9 KB
Original Source

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.

<PackageManagerTabs> <Tab value="pnpm">
bash
pnpm dlx create-turbo@latest -e with-tailwind
</Tab> <Tab value="yarn">
bash
yarn dlx create-turbo@latest -e with-tailwind
</Tab> <Tab value="npm">
bash
npx create-turbo@latest -e with-tailwind
</Tab> <Tab value="bun">
bash
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 to create a new monorepo:

<PackageManagerTabs> <Tab value="pnpm">
bash
pnpm dlx create-turbo@latest
</Tab> <Tab value="yarn">
bash
yarn dlx create-turbo@latest
</Tab> <Tab value="npm">
bash
npx create-turbo@latest
</Tab> <Tab value="bun">
bash
bunx create-turbo@latest
</Tab> </PackageManagerTabs> </Step> <Step>

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.

</Step> <Step>

Create a shared Tailwind CSS configuration package

First, build an Internal Package 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
{
  "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
@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
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. 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
{
  "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
{
  "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
/* 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
pnpm add @repo/ui @repo/tailwind-config --save-dev --filter=@repo/ui --filter=web
</Tab> <Tab value="yarn">
bash
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
npm install @repo/ui @repo/tailwind-config --workspace=web --workspace=@repo/ui --save-dev
</Tab> <Tab value="bun">
bash
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
@import "tailwindcss";
@import "@repo/tailwind-config";
</Tab> <Tab value="layout.tsx">
tsx
import "@repo/ui/styles.css";
import "./globals.css";
</Tab> <Tab value="postcss.config.js (Optional)">
js
import { postcssConfig } from "@repo/tailwind-config/postcss";

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