Angular library using Tailwind

I'm currently working on an Angular v14 project where we would like to create a library published into our private repository in order to share look 'n feel across other (angular) applications.

I've currently setup a very basis application sample-tailwind-app where I use a sample-library-lib project containing a very simple SampleButtonComponent with the following html:

<p class="custom">This is a sample button</p>


The sample-button-component.scss linked with the component contains the following:

.custom {
@apply font-bold underline;
}


From my main (sample-tailwind-app), I can see the "This is a sample button" text in the browser, however the font-bold and underline styling is not applied.

Tailwind is working for the components inside the main project, but is not for the components from the library.

App.component.html contains:

<h1 class="text-3xl font-bold underline">
Hello world!
</h1>

<p class="sample">This is a test</p>

<lib-sample-button></lib-sample-button>


the sample CSS class, font-bold and underline are working as expected.

app.component.scss:

.sample {
@apply font-bold underline;
}


My tailwind.config.ts:

/** @type {import('tailwindcss').Config} */

module.exports = {
content: [
"./src/**/*.{html,ts,scss}",
**"./node_modules/sample-library-lib/**/*.{html,ts,scss}",**
],
theme: {
extend: {},
},
plugins: []
}


Is there any way to get this working with libraries?

Continue reading...