Tailwind CSS in Micro Frontend Monorepo — Setup Guide

// Production build output:
// styles.css — 0 classes generated
// ERROR: @tailwind directives treated as plain text

This happens when you set up Tailwind CSS in a micro frontend monorepo the same way you would in a standard React app. It does not work that way.

Each MFE is an independent Webpack build. Tailwind is a PostCSS plugin that runs at build time inside postcss-loader. A single root-level tailwind.config.js will NOT be resolved by apps in apps/products/ — each app needs its own.

The content paths also differ between host and remote MFEs. The host scans ./src/**, ./public/**, and ./index.html. Remotes only scan ./src/** and ./src/index.html because they are loaded into the host at runtime.

What the full guide covers:

• Step-by-step installation — root + per-app dependencies with npm workspaces
• Per-MFE tailwind.config.js — host vs remote content path differences
• PostCSS + Webpack wiring — the 3-loader chain (MiniCssExtractPlugin -> css-loader -> postcss-loader)
• Why CSS is NOT shared via Module Federation — build-time vs runtime
• Shared Tailwind presets — consistent theming without duplicating configs
• CSS isolation with prefix — when and why to use it
• 5 common mistakes — wrong content paths, root-level config, missing postcss-loader, and more

Read the full guide with code examples from a real production monorepo:
https://blog.srinudesetti.in/micro-frontend/react/tailwind-css-micro-frontend-monorepo