Tailwind CSS with Module Federation

[j999perper]

I have two apps; remote app and consuming app with Next.js and Tailwind CSS.
I exposed a component in remote app styled using tailwind, but in my consuming app, the style is not affected.
Is there anyway to make it work?
Thanks

[stevebrowndotco]

I was able to achieve success here by using the twin.macro library. Essentially, it's leveraging tailwind with styled components, which currently plays nice with MF.

[j999perper]

Thanks @stevebrowndotco, I also used twin.macro library, it was successful.
Could you also share tailwind.config.js for configuration?

[stevebrowndotco]

There is nothing special about the tailwind configuration, it just looks like this (inside each MF)

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

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

The trick if i recall correctly is setting up babel config as outlined in the docs, then make twin macro a shared library in the MF config

[j999perper]

Thank you, let me try it. I have 2 separated applications for remote and consuming app.
Does it still work or is this just for mono repos?

[PouryaTak]

I had the same problem, so I decided to import the styles directly into the exposed Remote like this:
import 'tailwindcss/tailwind.css';
and it worked.

[jayaprakashHTC]

Hi folks,
With two host apps that host repositories and a remote app, I'm also experiencing the same problem with Module Federation For Next.js. Please provide a detailed explanation. How can I get the tailwind CSS from a remote app to load in the host app? with no npm packages, such as the twin.macro library.

[xeras]

You need to import your css file on page level or the component that you are importing in your host app.
If you just import the css in your _app.tsx it does not work.