Nx workspace, tailwind is not working in the libaries

Question

I got a problem, i configured tailwind for my angular project in an NX workspace. When I use tailwind in libaries now, it is a strange behavior. I kind of know the problem already, but i have no solution right now. This is the Tutorial I used to set up tailwind. Initially all worked fine, but now it is kind of that the scss / tailwind from the libaries is not applied. Normally it should work, in the tutorial they wrote this:

In an Nx workspace, a regular library (non-buildable and non-publishable) is just a slice of an application that is only built as part of the build process of an application that consumes it. Because of that, as long as the application that consumes it has Tailwind CSS configured, the library code will be processed as expected even though the library itself doesn’t have a Tailwind CSS configuration. In fact, adding a tailwind.config.js file to the library won’t have any effect whatsoever (it’ll be ignored) because the library is never built on its own.

So i don't know why it is not working. At the moment i have a bad workaround. I copy the html code from the libary in the project and after it has compiled, I delete it and the tailwind configuration gets applied to the libary.

So how can i make sure that the tailwind is applied to the libaries, without copying the code.

style.scss, have the 3 imports: @tailwind base; @tailwind components; @tailwind utilities;

tailwind.config.js:

const { join } = require('path');

module.exports = {
  content: [
    join(__dirname, '/src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Answer 1

If the default setup is not functioning or if you create your own "libraries" folder, you must inform Tailwind where to locate it. In such instances, you should modify the "content" property accordingly. Documentation

Example: Suppose I have a custom folder named "web" that contains my libraries. In this scenario, the Tailwind "content" property should be modified to include this information.

join('web/**/!(.stories|.spec).{ts,html}')