Skip to content

Basic Tailwindcss 4 setup broken on host / dynamic-host #883

@binsky08

Description

@binsky08

With what library do you have an issue?

module-federation

Reproduction of the bug/regression with instructions

Setup basic Angular project with Tailwindcss 4 following the official docs (https://tailwindcss.com/docs/installation/framework-guides/angular) before adding @angular-architects/module-federation which will break the styles.

Bootstrap new Angular 20 project:

ng new my-project --style css
cd my-project

npm install tailwindcss @tailwindcss/postcss postcss --force

Create .postcssrc.json with this content:

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

Replace content of ./src/styles.css with this:

@import "tailwindcss";

Replace content of src/app/app.html with this (to keep it simple):

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

Run ng serve and validate that the styling works ("Hello world!" should be bold and underlined)

Now we'll break the styling by adding our federation package (with the default name, port and classic webpack stack):

ng add @angular-architects/module-federation --type dynamic-host

If you check the web page with running ng serve afterwards, the "Hello world!" is completely unstyled.

The browser console shows this error: Uncaught SyntaxError: import.meta may only appear in a module coming from styles.js:3682:29

Expected behavior

I would expect a seamless integration of Tailwindcss 4 when using @angular-architects/module-federation in my project.
If addition (configuration) changes are mandatory, I would like to find a documentation about it in the wiki or README.

Versions of Native/Module Federation, Angular, Node, Browser, and operating system

Module Federation: 20.0.0 (from npmjs.com)
Angular: 20.0.5
Angular CLI: 20.0.4
Node: 24.2.0
Browser: Firefox 139.0.4
Operating System: TUXEDO OS 24.04

Other information

Unfortunately I did not get it work to try the latest @angular-architects/module-federation version 20.0.6 from github, since it's not on npmjs yet.

But it works well with @angular-architects/native-federation

I would be willing to submit a PR to fix this issue

  • Yes
  • No

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions