Turborepo with Tailwind CSS v4

This is an example setup for a mono repository using Tailwind CSS version 4.

Getting Started

Dependencies

First install the necessary dependencies

pnpm install

Update all dependencies in all apps and packages to latest version

pnpm up --recursive --latest

Dev mode

Then you can run the project with

pnpm dev

Build for production

or you can build an optimized production version with

pnpm build

or build and run the production version with

pnpm start

What's inside?

This Turborepo includes the following packages/apps:

Apps and Packages

• web: a Next.js app with Tailwind CSS
• design-system: a collection of basic React Design System components and Design Tokens styled with Tailwind CSS and shared with web application and other packages.
• ui: a set of more specific React UI components with Tailwind CSS shared with web application.
• @turbo-with-tailwind/eslint-config: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• @turbo-with-tailwind/typescript-config: tsconfig.jsons used throughout the monorepo

Each package/app is 100% TypeScript.

Building packages

This example is set up to produce compiled styles for design-system and ui components into the dist directories. The component .tsx files are consumed by the Next.js apps directly using transpilePackages in next.config.js. This was chosen for several reasons:

• Make package compilation simple by only depending on the Next.js Compiler and tailwindcss.
• Maintain clear package export boundaries.

Differences in Tailwind 4 vs Tailwind 3

Compared to Tailwind CSS version 3 the tailwind config files have been removed (including the shared config package). All configurations are now placed directly inside the CSS file(s) see Tailwind Upgrade Guide for more information. As well as Tailwind's directives for custom configurations.

Utilities

This Turborepo has some additional tools already setup for you:

• Tailwind CSS for styles
• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting