This guide shows how to set up and configure Tailwind CSS with Angular projects in an Nx workspace.
Installation
Section titled “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
Section titled “Configuring sources for monorepos”Tailwind CSS v4
Section titled “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.
@import 'tailwindcss';@source "../../../libs";
Tailwind CSS v3
Section titled “Tailwind CSS v3”For Tailwind CSS v3, the content
property should be configured to include glob patterns that cover your project and its dependencies:
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.