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 to look like this, with tailwind.scss being the 1st element

	"styles": [

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 = {
frontend: path.join(__dirname, "apps/frontend/src/app"),

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

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
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"