Using Tailwind CSS with React

This guide shows how to set up Tailwind CSS in your React applications within an Nx workspace.

Installation

For the most up-to-date installation instructions, refer to the official Tailwind CSS documentation:

• Vite projects: Tailwind CSS with Vite
• Next.js projects: Tailwind CSS with Next.js
• Other setups: Tailwind CSS installation guide

Configuring sources for monorepos

Tailwind CSS v4

For Tailwind CSS v4, classes are automatically detected from source files. To register workspace libraries, add the following configuration to your stylesheet where you configure TailwindCSS.

apps/myapp/src/styles.css

@import 'tailwindcss';
@source "../../../libs";

Tailwind CSS v3

For Tailwind CSS v3, the content property should be configured to include glob patterns that cover your project and its dependencies:

apps/my-app/tailwind.config.js

const { join } = require('path');

module.exports = {
  content: [
    join(__dirname, '{src,pages,components,app}/**/*.{ts,tsx,js,jsx}'),
    join(__dirname, '../../libs/**/*.{ts,tsx,js,jsx}'),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

You can adjust the glob patterns based on your workspace structure. For example, you can be more selective by targeting individual libraries such as libs/my-lib rather than all libraries (libs). To learn how to automatically sync library dependencies with Tailwind sources, watch our video Never Update Tailwind Glob Patterns Manually Again.