Setup Tailwind in nx.dev Workspace

Nx.dev is a set of extensible dev tools for monorepos, which allows you to create, test, and build your applications all in one place.

You can install Nx.dev and create a nx workspace by running the following command:

npx create-nx-workspace@latest

? Choose what to create                 …
Package-based monorepo:     Nx makes it fast, but lets you run things your way.
Integrated monorepo:        Nx configures your favorite frameworks and lets you focus on shipping features.
Standalone React app:       Nx configures Vite (or Webpack), ESLint, and Cypress.
Standalone Angular app:     Nx configures Jest, ESLint and Cypress.
Standalone Node Server app: Nx configures a framework (ex. Express), esbuild, ESlint and Jest.

==> Choose Integrated monorepo

Follow the command promts and give it relevant workspace name, if you choose React as one of the starters it should now look like this.

✔ Choose what to create                 · integrated
✔ What to create in the new workspace   · react-monorepo
✔ Repository name                       · organisation
✔ Application name                      · employees
✔ Bundler to be used to build the application · webpack
✔ Default stylesheet format             · css
✔ Enable distributed caching to make your CI faster · No

If you ended up with an empty workspace you can still add it like this.

nx g @nrwl/react app-name

Tailwind CSS is a popular utility-first CSS framework that allows you to quickly style your application with pre-defined classes, this guide will help you get started with installing Tailwind CSS in your NX workspace.

Automated Setup

The easiest way to install Tailwind in your project is to use the @nrwl/react:setup-tailwind generator. Simply run the following command:

nx g @nrwl/react:setup-tailwind --project=app-name

This will automatically install the necessary dependencies and create the required configuration files, including postcss.config.js and tailwind.config.js. Once installed, you can start using Tailwind classes and utilities in your app.

Manual Setup Instructions:

If you prefer to perform the installation steps manually, follow these instructions:

Step 1: Install Tailwind Dependencies

Install the required dependencies by running the following command:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Alternatively, if you use Yarn, run:

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

Step 2: Initialize Tailwind

Initialize Tailwind by running the following command:

cd {path to your app}
npx tailwindcss init -p

This creates the required configuration files with a general boilerplate implementation.

Pointing PostCSS to Tailwind Config

Update the postcss.config.js file as follows:

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

module.exports = {
  plugins: {
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {},
  },
};

This configures PostCSS to use the Tailwind configuration file.

Tailwind offers the advantage of automatically eliminating unused CSS through a process called "purging." To specify the file to be processed, tailwind.config.js contains a content property (previously known as purge in v2), which can be configured. The official Tailwind documentation provides more information.

The content property typically involves a glob pattern that includes all necessary files that need processing.

In an Nx workspace, it's typical for a project to rely on other projects as its dependencies. However, updating and maintaining the glob pattern to account for these dependencies and their associated files can be a challenging and error-prone task. In order to streamline this process, Nx provides a utility function that can generate the glob representation of all files that a project depends on, based on the Nx Project Graph.

To use this utility function, add the following code to your tailwind.config.js file:

const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');
const { join } = require('path');

module.exports = {
  content: [
    join(
      __dirname,
      '{src,pages,components}/**/*!(*.stories|*.spec).{ts,tsx,html}'
    ),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Step 3: Import Tailwind CSS Styles

To use Tailwind styles in your app, add the following lines to your application's base styles.css or styles.scss file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4: Applying configuration to libraries

Lastly, let's update the application's project configuration to point to the postcss.config.js file that we created in step 2.Open up the apps/{your app here}/project.json file and add the following to the build target.

apps/{your app here}/project.json

{
  // ...
  "targets": {
    "build": {
      "executor": "@nrwl/web:webpack",
      "options": {
        // ...
        "postcssConfig": "apps/{your app here}/postcss.config.js"
      }
    }
  }
  // ...
}

And that's it!

Feel free to clone the repo and try it out for yourself github 💻.