generated tailwind configuration doesn't affects libraries styles

[NachoVazquez]

Current Behavior

After generating a workspace containing an application and a library and configuring Tailwind for both using the qwik-nx generator, we can observe that the tailwind configuration of the library is never applied.

Expected Behavior

I have options:

1. The Tailwind config for the library should work (I don't know how easy or possible this is)
2. Make the default work like Nx + React + Tailwind, where the libraries use the tailwind config of the application that imports them.

If the team prefers solution 2, I can create a PR.

GitHub Repo

https://github.com/NachoVazquez/nx-qwik-tailwind-reproduction

Steps to Reproduce

1. Generate an app
2. Generate lib
3. Configure tailwind for both
4. Create a custom color class in the library's Tailwind config
5. Use the custom color in a component of the library
6. Import the library's component into a component of the application.
7. Run the app and see how it doesn't work

Nx Report

Node   : 16.18.1
   OS     : darwin arm64
   yarn   : 1.22.19
   Hasher : Native

   nx                 : 16.3.2
   @nx/js             : 16.3.2
   @nx/linter         : 16.3.2
   @nx/workspace      : 16.3.2
   @nx/devkit         : 16.3.2
   @nx/eslint-plugin  : 16.3.2
   @nrwl/tao          : 16.3.2
   @nx/vite           : 16.3.2
   typescript         : 5.0.4
   ---------------------------------------
   Community plugins:
   qwik-nx : 1.0.4

Failure Logs

No response

Additional Information

The nx utility for Tailwind and React works for Qwik.

const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');

But it would be great if a copy of the same would exist under the qwik-nx namespace.

[dmitry-stepanenko]

Hey @NachoVazquez, thanks for raising this. I'll evaluate and come back to it soon

[samyosm]

Does anyone have a workaround or a temporary solution while this hasn't been fixed?

[NachoVazquez]

Does anyone have a workaround or a temporary solution while this hasn't been fixed?

Hey @samyosm , if you use the const { createGlobPatternsForDependencies } = require('@nx/react/tailwind'); as stated before, everything fine.

The only limitation is that you will not have a tailwind.config per library, only per application.

[samyosm]

Thank you, it is working.

[flutcon]

Hi, is there an update to this? Also, what are the exact steps I have to run to apply the workaround mentioned above. I'm pretty new to nx and need some more details please. Thanks!

Update: got the workaround working - had to force install @nx/react - npm install -D @nx/react --force