tailwindcss-plugin-mfe

Use shared tailwindcss utility modules to prevent duplicates across microfrontends.

npm i -D tailwindcss-plugin-mfe

Usage

Generate a shared tailwind.css file

Create a tailwind.config.js in your root app with a list of global tailwind classes configured in safelist:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  safelist: [
    // add global tailwind classes here
    'p-1',
    'p-2',
    'p-3',
    'p-4',
    'p-5',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Generate a global tailwind.css file with the shared classes:

npx tailwindcss -o dist/tailwind.css 

Add the tailwind.css file to your app's index.html file:

<link rel="stylesheet" href="dist/tailwind.css" />

Use the shared utility classes

Use the tailwindcss-plugin-mfe plugin in your microfrontends to prevent tailwindcss from generating duplicate classes.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [
    require('tailwindcss-plugin-mfe')({
      shared: [
        'p-1',
        'p-2',
        'p-3',
        'p-4',
        'p-5',
      ],
    }),
  ],
  /* optionally disable preflight */
  corePlugins: {
    preflight: false,
  },
}