Using Tailwind CSS with Angular

This guide shows how to set up and configure Tailwind CSS with Angular projects in an Nx workspace.

Installation

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

• Angular projects: Tailwind CSS with Angular
• 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/**/*.{ts,html}'),
    join(__dirname, '../../libs/**/*.{ts,html}'),
  ],
  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.