Module Federation with Tailwind

Current Behavior

Running dep-graph in the project where modules are imported via module federation, federated modules are not marked as a dependency. This might be a problem because the Tailwind config file benefits from createGlobPatternsForDependencies and therefore federated modules need to be added with a custom glob pattern.

Expected Behavior

createGlobPatternsForDependencies should work with federated modules. I just expect that one tailwind config should be enough.

Steps to Reproduce

Just create a module federation demo with nx and add tailwind to your host application. Try to use tailwind in federated modules or its child libraries.

Failure Logs

Environment

Nearly the same repo --> https://github.com/Coly010/example-nx-ng-mfe Angular based mfe’s.

[bressanelle]

hey @sdedieu. I guess I found a way to workaround this situation without using apply in each component.

I created tailwind.config.js in root level of monorepo like that

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

module.exports = {
  darkMode: 'class',
  content: [
    join(__dirname, 'apps/frontend/*/src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms')],
};

then I removed of my shell and remote apps all styles using

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

and I also removed their own tailwind.config.js

So I created a lib called ui/common with globalTailwind.css that uses tailwind config

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

and finally added in shell and remote apps in their project.json "styles": ["libs/ui/common/styles/globalTailwind.css"],

I dont know if it is a elegant method to solve this problem but now my remotes apps and shell are using tailwind utilities classes in their html files. Dark theme also works

[Coly010]

@bressanelle It should work, but the downside is you lose the benefit of the Tailwind’s PostCSS Purge step where it reduces the size of your CSS bundle.

But it is a workaround.

I’m going to close this issue as this is a limitation of the tooling, and there is a workaround listed above.