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 throw how to build this Tailwind CSS + Turborepo template.

Terminal

pnpm dlx 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

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

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

Good to know:

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

Use the UI package in an application

Install the packages you've created into your application.

Terminal

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

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';
@import '@repo/ui/styles.css';