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 ...
Source: DEV Community
// 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 NO
