Angular Cypress Component tests not working with Tailwindcss

Question

When running Tailwindcss in an Nx style monorepo (apps and libs folders) I have setup the Tailwind config as:

content: ['./apps/**/*.{html,ts}', './libs/**/*.{html,ts}'],

But it is not applying any Tailwindstyles and gives the error:

"warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration."

And no styling is applyed to the component tests.

I tried to change the content in the tailwind.config.js to:

content: ['/**/*.{html,ts}', '**/*.{html,ts}'],

Which works but makes tailwind execution slow as it will also evaluate node_modules.

score 1 · Accepted Answer · answered Dec 13 '22 at 14:46

1

It worked by adding:

'./src/**/*.{html,ts}'

To the tailwind.config.js's content:

content: ['./apps/**/*.{html,ts}', './libs/**/*.{html,ts}', './src/**/*.{html,ts}'],

answered Dec 13 '22 at 14:46

lyzz

128
1
9

I am still missing few tailwind classes here and there, maybe caused by JIT. Did you have similar issue? – AlexZvl Dec 30 '22 at 09:05
No, it got solved by this. – lyzz Dec 31 '22 at 12:59
Do you also have custom tailwind theme? – AlexZvl Dec 31 '22 at 13:18
I do have a custom tailwind theme – lyzz Jun 20 '23 at 09:05

Angular Cypress Component tests not working with Tailwindcss

1 Answers1