Tailwind classes not applied in Angular 19.2, Tailwind 4.0, Cypress 14

[denious]

Hi all,

Any ideas on what's missing to get Tailwind 4.0 classes working with Component Testing?
Styles are compiled and pulled, see screenshot below, and all non-Tailwind classes seem to work as expected.

Tailwind classes not applied

Stack

• Angular 19.2 w/ SCSS
• Tailwind 4.0 via PostCSS
• Cypress 14.2

styles.scss

@use "tailwindcss";
@use "primeicons/primeicons.css";

html {
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  background-color: var(--p-surface-50);
}

h1 {
  font-size: 2.286rem;
}

h2 {
  font-size: 1.714rem;
  font-weight: 700;
  margin: 1.5rem 0;
}

h3 {
  font-size: 1.429rem;
}

[achimheynen]

It seems you are using primeng on top. I had a similar problem - maybe the same.
I installed the tailwind cli npm install @tailwindcss/cli
My pendant to your styles.scss starts with:

@import 'tailwindcss';
@plugin 'tailwindcss-primeui';

html {...

The cli is used to generate a compiled version of the styles.scss before cypress is launched by extending the start script in package.json like:

{
    scripts: {
        "cypress-open": "npx @tailwindcss/cli -i ./src/app/styles.scss -o ./cypress/styles/component-test-styles.scss && npx cypress open"

Then, in my cypress.config.ts I added the generated scss file like:

    component: {
        devServer: {
            options: {
                    buildOptions: {
                        styles: [
                            ...
                            'node_modules/primeicons/primeicons.css',
                            'cypress/styles/component-test-styles.scss'
                        ]

I hope I mentioned everything that was existential to get the component tests running.
There is a watch-option for the styles compiler. But I had problem with restarting tests as the styles file got updated without any actual changes. Being aware of restarting cypress on major style changes was the better workaround than randomly restarting tests.

Btw: Do not use // comments on your styles.scss as the tailwind compiler generates a one liner for the whole file. That means, putting a // anywhere causes the rest of the file being part of the comment!

Edit: As I wrote the example, I actually updated my code form prime-icons 6 to 7 and encountered some issues later with the way to import the icon styles. Different from the documentation it works for me by not importing it in the scss but putting it in the styles of the build options.