
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
Continue reading on Dev.to
Opens in a new tab


