Using tailwindcss in custom angular library

Question

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?

Answer 1

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.

Answer 2

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!

Answer 3

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

Answer 4

If you are consuming your library in the project of same directory, no specific action is needed. Just modify your tailwind.config.js file to contain html files of your library.

module.exports = {
  content: [
    "./src/**/*.html",
    "./projects/my-fancy-library/src/**/*.html", //just add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

But if you are publishing the library to a npm registry, the previous approach could not work and your tailwind styles won't apply .For overcome this you can create a separate style.css file for your library (which will be generated by tailwind) and then import that style.css into your destination project, as you import Angular Material styles or any other libraries styles to your project.

So for doing this, create a separate tailwind config file for your library. Name it like mylib-tailwind.config.js and put the path of your library html files in it:

module.exports = {
  content: [
    "./projects/my-fancy-library/src/**/*.html"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Also your package.json file should be something like this:

  {
    "scripts": {
      "build-lib": "ng build my-fancy-lib",
      "build-tailwind": "tailwindcss -c ./mylib-tailwind.config.js -i ./src/tailwind-input-style.scss -o ./dist/my-fancy-lib/src/lib/my-lib-tailwind.css --minify"
    },
    "devDependencies": {
      "autoprefixer": "10.4.13",
      "postcss": "8.4.20",
      "tailwindcss": "3.2.4"
    }
  }

After building your library with Angular cli, just run build-tailwind script to generate output style of your project in dist folder.

Again after publishing your dist folder and installing your library, for applying tailwind generated style add it to your destination project from angular.json file.

Answer 5

Your solution didn't work in my case just because of the npx tailwindcss-cli build compiler.

My solution is basically the same as yours, but using the npx tailwindcss compiler, like the Tailwind docs suggest.

Step 1

In your library folder, have the Tailwind config content as if the origin is the base project folder:

module.exports = {
  content: [
    './projects/my-lib/**/*.{html,ts,css,scss}',
    './**/*.{html,ts,css,scss}', // optional
  ],
};

Step 2

In step 3, a tailwind.scss file will be generated into the my-lib/src/lib folder, so (as suggested by your answer) you have to include the tailwind.scss file in your component:

styleUrls: ['../tailwind.scss'].

(Careful with the path).

Step 3

Run this command (this is the app context, but it can be run from the library if the content in the tailwind.config.js has the optional path, and obv the paths have to be adapted).

npx tailwindcss@latest -c ./projects/my-lib/tailwind.config.js -o ./projects/my-lib/src/lib/tailwind.scss 

Run it every time before building the library. This part must be run from the app context. package.json

{
  "scripts": {
    "build:my-lib": "npx tailwindcss@latest -c ./projects/my-lib/tailwind.config.js -o ./projects/my-lib/src/lib/tailwind.scss & ng build my-lib"
  }
}