Setting up TailwindCSS with Nx & Angular 11

I spent a solid 3 days going through countless medium articles, reddit posts & documentations looking for a way to get tailwind to play ball with this setup. The easy part is getting tailwind to actually be a part of the bundle, but the hard part was getting the purging, @apply & scss building to work correctly

1 installing tailwind & webpack

npm install -D @tailwindcss/jit tailwindcss postcss webpack @angular-builders/custom-webpack --force

2 create a tailwind.scss file

keep the tailwind styles separate from your actual styles.scss & add this to a file called tailwind.scss in the src/ directory of your angular app

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
  p {
    @apply mb-3;
  }
}

3 update nx workspace.json

set your FRONTEND.targets.build.styles to look like this, with tailwind.scss being the 1st element

	"styles": [
		"apps/frontend/src/tailwind.scss",
		"apps/frontend/src/styles.scss",
	],

4 create a webpack.config.js & tailwind.config.js file

spread & push our config over top of the config nx creates when calling nx run frontend etc.

"use strict";
const webpack = require("webpack");
const path = require("path");

module.exports = async (config, context) => {
  console.log("Webpack running in", config.mode); // production, development

  // Add alias to allow for @frontend import, e.g.
  // import { Component } from "@frontend/component"
  config.resolve.alias = {
    ...config.resolve.alias,
    frontend: path.join(__dirname, "apps/frontend/src/app"),
  };

  config.module.rules.push({
    test: /tailwind\.scss$/,
    loader: "postcss-loader",
    options: {
      postcssOptions: {
        ident: "postcss",
        syntax: "postcss-scss",
        plugins: [
          require("postcss-import"),
          // only purge classes when building production app
          require("tailwindcss")(
            require("./tailwind.config.js")(config.mode !== "development")
          ),
          require("autoprefixer"),
        ],
      },
    },
  });

  config.module.rules.push({
    test: /\.scss$/,
    loader: "sass-loader",
  });

  return config;
};

// safelist array not currently supported, hack in a file with all safelisted classes
// for the tailwind/jit compiler to keep them in https://github.com/tailwindlabs/tailwindcss-jit/issues/32
module.exports = (isProduction) => ({
  prefix: "",
  purge: {
    enabled: isProduction,
    content: ["**/*.html", "**/*.ts", "./apps/frontend/safelist.txt"],
    options: {
      safelist: [],
    },
  },
  darkMode: false,
  theme: {},
  variants: {},
  plugins: [],
});

5 set angular to build using custom-webpack builder

for building:

"frontend": {
	"projectType": "application",
	"root": "apps/frontend",
	"sourceRoot": "apps/frontend/src",
	"prefix": "app",
	"targets": {
		"build": {
			"executor": "@angular-builders/custom-webpack:browser",
			"options": {
				"customWebpackConfig": {
					"path": "apps/frontend/webpack.config.js"
				},
				...

and for serve:

"serve": {
	"executor": "@angular-builders/custom-webpack:dev-server",
	"configurations": {
		"development": {
			"browserTarget": "frontend:build:development",
			"proxyConfig": "apps/frontend/proxy.conf.json"
		},
		...