Setup tailwind css with Nx microfront-ends using angular and buildable library

I am trying to setup tailwind css with nx mono-repo using Angular, following the steps from here https://nx.dev/recipes/other/using-tailwind-css-with-angular-projects#tailwind-css-setup-scenarios

1. Create Nx Workspace

   npx create-nx-workspace@latest fetebird-ui

   cd fetebird-ui

2. Install nrwl/angular package

   npm install @nrwl/angular

3. Create multiple application

   nx g @nx/angular:host host --remotes=product,discount,order

4. Create a Buildable library

   npx nx g @nx/angular:lib my-lib --buildable --add-tailwind

5. Add Tailwind CSS to an existing Angular application

   npx nx g @nx/angular:setup-tailwind host

   npx nx g @nx/angular:setup-tailwind project

apps/product/tailwind.config.ts

const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
const { join } = require('path');
const sharedTailwindConfig = require('../../libs/tailwind-preset/tailwind.config');

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [sharedTailwindConfig],
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

libs/service/tailwind.config.ts

const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
const { join } = require('path');
const sharedTailwindConfig = require('../../libs/tailwind-preset/tailwind.config');


/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [sharedTailwindConfig],
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Create tailwind-preset

module.exports = {
 presets: [
    require('./tailwind-preset.js')
 ],
  theme: {
  },
  plugins: [],
};

project.json

{
  "projectType": "library",
  "root": "libs/tailwind-preset",
  "sourceRoot": "libs/tailwind-preset",
  "targets": {},
  "tags": []
}

tailwind-preset.js

module.exports = {
  theme: {
  },
  plugins: [
    ],
}

apps/host/style.scss

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

apps/product/style.scss

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

When we server multiple application, the tailwind css is not working.

nx serve host --open --devRemotes=product,discount,order

I just want to share the default tailwind css across all the application

Nx Core Team member here 👋

TailwindCSS runs a purge on the classes that are used within an Application.

Your Host Application is not linked to your remote Applications in any meaningful way, meaning Tailwind doesn't know about the classes that are used in your remote applications' code.

Because of this, it can strip them out of the final CSS bundle.

The easiest solution is to add an implicitDependency between your Host application and your Remote applications:

https://nx.dev/reference/project-configuration#implicitdependencies

Another solution is to add the paths to your remote applications in your host's tailwind.config.js file:

content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
    ...createGlobPatternsForDependencies(join(__dirname, relativePathToRemoteApplication))
  ],