Cách cấu hình Tailwind CSS chuẩn xác cho kiến trúc Micro Frontend Monorepo

Bạn có thể đã gặp phải tình huống khó chịu khi build: file styles.css trả về kết quả không có class nào được tạo ra, hoặc các chỉ thị @tailwind bị coi là văn bản thuần. Lỗi này thường xảy ra khi bạn cố gắng thiết lập Tailwind CSS trong một Monorepo Micro Frontend theo đúng cách mà bạn vẫn làm với một ứng dụng React tiêu đơn lẻ. Tuy nhiên, cách tiếp cận đó hoàn toàn không hoạt động trong kiến trúc này.

Tại sao cách cấu hình thông thường thất bại?

Mỗi Micro Frontend (MFE) là một bản build Webpack độc lập. Tailwind CSS hoạt động như một plugin PostCSS chạy trong quá trình build (build-time) bên trong postcss-loader. Một file cấu hình duy nhất tailwind.config.js đặt ở cấp độ gốc (root) sẽ KHÔNG được tự động giải quyết (resolve) bởi các ứng dụng nằm trong thư mục con như apps/products/. Do đó, mỗi ứng dụng cần phải có file cấu hình riêng của mình.

Ngoài ra, đường dẫn (content paths) để quét các class cũng khác nhau giữa Host và Remote MFEs:

• Host: Quét ./src/**, ./public/** và ./index.html.
• Remote: Chỉ quét ./src/** và ./src/index.html vì chúng được tải vào Host tại thời điểm chạy (runtime).

Tổng quan hướng dẫn cài đặt chi tiết

Để giải quyết các vấn đề trên, hướng dẫn đầy đủ sẽ bao gồm các bước kỹ thuật sau:

• Cài đặt từng bước (Step-by-step installation): Thiết lập dependencies ở cấp root và cho từng ứng dụng con sử dụng npm workspaces.
• Cấu hình tailwind.config.js cho từng MFE: Phân biệt rõ sự khác biệt về đường dẫn content giữa Host và Remote.
• Kết nối PostCSS và Webpack: Thiết lập chuỗi 3 loader quan trọng: MiniCssExtractPlugin -> css-loader -> postcss-loader.
• Tại sao CSS KHÔNG được chia sẻ qua Module Federation: Hiểu rõ sự khác biệt giữa build-time và runtime.
• Chia sẻ Tailwind Presets: Cách duy trì giao diện (theming) nhất quán mà không cần sao chép cấu hình.
• Cô lập CSS với tiền tố (prefix): Khi nào và tại sao nên sử dụng tính năng này.
• 5 sai lầm phổ biến: Tránh các lỗi như sai đường dẫn content, cấu hình cấp root, thiếu postcss-loader, v.v.

Để đọc toàn bộ hướng dẫn cùng với các ví dụ mã nguồn thực tế từ một dự án monorepo production, bạn có thể truy cập bài viết gốc tại đây:

https://blog.srinidesetti.in/micro-frontend/react/tailwind-css-micro-frontend-monorepo