Using tailwindcss in custom angular library

user_9229931 0
Viewed 2610

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-css angular
3 Answers

I found a solution for my own problem. One needs to create a static stylesheet file since it is not generated automatically.

  • Create the tailwindcss.config.js in the root of your library
  • From the root of the library run npx tailwindcss-cli@latest build -o ./src/lib/tailwind.scss
  • Include the tailwind.scss file in your component: styleUrls: ['../tailwind.scss']. (Careful with the path)

One still needs to run the npx tailwindcss-cli@latest build -o ./src/lib/tailwind.scss everytime a new class is added to a component to be included into tailwind.scss.

user_92299310

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!

user_32102760

I know this is an old post, but while trying to figure out how to do this, I found that adding Tailwind dependency to Angular libraries is basically not possible, as of the date of writing this answer. This is because ng-packagr does not support loading up a custom postcss config.

Find more details here:

https://github.com/ng-packagr/ng-packagr/issues/1471

https://github.com/ngneat/tailwind/issues/12

https://github.com/ng-packagr/ng-packagr/issues/643

https://github.com/just-jeb/angular-builders/issues/1059 -> I found this to be the best explanation as to why it is not possible.

The accepted answer, while works, will copy the whole TailwindCSS bundle into the final build, which defeats the purpose.

Update: This is another way of adding TailwindCSS support to your Angular library, if you really need to do so. While, it's still a "hacky" way, but it is better than the accepted answer since it does not include the entire TailwindCSS stylesheet, thanks to @Charly

user_36403070
Related