Angular SSR + Tailwind, ERR_CONTENT_LENGTH_MISMATCH Problem

[NazimMertBilgi]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

Greetings to everyone,
First of all, I would like to thank the entire Angular team for giving us the opportunity to provide development in the development section of our express api directly in the server.ts file for Angular 19.
I apologize in advance for my low-intermediate level English :)

When I add Tailwind plugin to my project, I do not encounter any problems in the development environment.

But when I got the build and
npm run serve:ssr:FirstAngular19Project
When I run the command, I go to localhost:4000 and I get the following error and the page loads very late.

Can you please take care of this issue? Thanks in advance, good work.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

"dependencies": {
    "@angular/animations": "^19.0.0-next.0",
    "@angular/common": "^19.0.0-next.0",
    "@angular/compiler": "^19.0.0-next.0",
    "@angular/core": "^19.0.0-next.0",
    "@angular/forms": "^19.0.0-next.0",
    "@angular/platform-browser": "^19.0.0-next.0",
    "@angular/platform-browser-dynamic": "^19.0.0-next.0",
    "@angular/platform-server": "^19.0.0-next.0",
    "@angular/router": "^19.0.0-next.0",
    "@angular/ssr": "^19.0.0-rc.1",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.0.0-rc.1",
    "@angular/cli": "^19.0.0-rc.1",
    "@angular/compiler-cli": "^19.0.0-next.0",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "autoprefixer": "^10.4.20",
    "jasmine-core": "~5.4.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "postcss": "^8.4.47",
    "tailwindcss": "^3.4.14",
    "typescript": "~5.6.2"
  }

Anything else?

app.component.ts

import { isPlatformBrowser } from '@angular/common';
import { Component, Inject, PLATFORM_ID } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  template: `

<div class="flex justify-around pt-10 dark:animate-bounce">
  <div>
  <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>
  </div>
  <div>
  <button type="button" class="py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Alternative</button>
  </div>
  <div>
  <button type="button" class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">Dark</button>
  </div>
</div>

<input type="checkbox" name="light-switch" class="light-switch" />
<label for="light-switch">Switch to light / dark version</label>
 `,
})
export class AppComponent {

  constructor(@Inject(PLATFORM_ID) private _platformId: Object) { }

  ngAfterViewInit() {
    if (isPlatformBrowser(this._platformId)) {
      const lightSwitches = document.querySelectorAll('.light-switch');
      if (lightSwitches.length > 0) {
        lightSwitches.forEach((lightSwitch, i) => {
          if (localStorage.getItem('dark-mode') === 'true') {
            //@ts-ignore
            lightSwitch.checked = true;
          }
          lightSwitch.addEventListener('change', () => {
            //@ts-ignore
            const { checked } = lightSwitch;
            lightSwitches.forEach((el, n) => {
              if (n !== i) {
                //@ts-ignore
                el.checked = checked;
              }
            });
            //@ts-ignore
            if (lightSwitch.checked) {
              document.documentElement.classList.add('dark');
              //@ts-ignore
              localStorage.setItem('dark-mode', true);
            } else {
              document.documentElement.classList.remove('dark');
              //@ts-ignore
              localStorage.setItem('dark-mode', false);
            }
          });
        });
      }
    }
  }

}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.ts',
  ],
  darkMode: "class", // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

styles.css

/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;

[dgp1130]

Thanks for trying out v19 and reporting this issue. Are you using the new SSR routing APIs (provideServerRouting)? Can you put together a minimal reproduction demonstrating the error? We should be able to take a closer look then if we can reproduce the precise problem you're describing.

[NazimMertBilgi]

Thanks for trying out v19 and reporting this issue. Are you using the new SSR routing APIs (provideServerRouting)? Can you put together a minimal reproduction demonstrating the error? We should be able to take a closer look then if we can reproduce the precise problem you're describing.

Of course, I will add the sample project as soon as possible.

[NazimMertBilgi]

FirstAngular19Project.zip
You can access the files here.
@dgp1130

[ocombe]

You can find a repro here if you need it as well: #28893

Mine is a lot simpler (no tailwind), looks like the issue is with a specific style (which is probably also used by tailwind):

<style>
  div::before {
    content: "\2022 \2022 \2022";
  }
</style>

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}