Using tailwindcss in custom angular library

I am using Angular 12 to create a custom library. In this library I want to use tailwindcss to style my custom component. I declared tailwindcss an a peer dependency and created the tailwinscss.config.js file in the root of the library folder and imported all necessary modules into the scss file of the component. Unfortunately tailwind classes are not loaded.

Then I noted that if my application where I import my library into also uses tailwind and uses any class that is also used in the library, the custom component is styled correctly.

For example: my custom component has class bg-green-800. When I load this component in my app, it does not apply the background color. Then I create an element in my app and also apply bg-green-800. From now on both element and custom component show the correct background color.

Is there a way to use tailwindcss in a custom angular library?

Tailwind 3+ easy solution: Just add your library folder to the tailwind.config.js

module.exports = {
    content: [
      "./src/**/*.{html,ts}",
      "./projects/ui-components/src/**/*.{html,ts}",
    ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
  corePlugins: {
    preflight: false,
  }
}

Tested with Angular 13, works like a charm!