CODEWITHSUNDEEP
angularsasstailwind-cssangular-library
zettee
zettee

Reputation: 147

Angular v12 Component style files not compiling tailwindcss @apply

I am a student in computer science and I am working on a project for my studies. I currently try to develop a component library for the Angular framework using Angular V12. For styling I want to use Tailwindcss (especially because it spares me with working with media queries on some points...). Anyway, when I build the library and test it in another project, no tailwind styles are included.

I know from the tailwind docs, that you can use some directives or functions like @apply in plain scss.

To give you a better understanding on the problem I have linked the github repo to the library's source code for reference. I have a button component which should have some tailwind styles applied. This is done by specifying a class to the html element called .btn. This class is defined inside the button.component.scss file. This file is as well referenced in the button.component.ts file as styleUrl. So my question is: How can I fix the issue with the styles not being applied using @apply inside button.component.scss?

This is how the styles are defined in button.component.scss:

.btn {
  @apply px-2 py-1 text-sm rounded-sm transition-all bg-placeholder-light hover:bg-placeholder active:bg-placeholder-dark relative border-2 border-transparent;
}

This .btn class is then applied to the html element like this:

<button class="btn" (click)="clicked($event)">
    <ng-content></ng-content>
</button>

Exporting this does not apply the classes defined previously. Howevery, if I directly apply the styles in the class attribute like that:

<button class="px-2 py-1 text-sm rounded-sm transition-all bg-placeholder-light hover:bg-placeholder active:bg-placeholder-dark relative border-2 border-transparent" (click)="clicked($event)">
    <ng-content></ng-content>
</button>

Everything works as expected. This seems like a very strange behaviour as I am expecting the button.component.scss file to be somehow compiled with the correct styles.

Is there a way to fix this problem? Or do I have to take a very different approach? I know that I could simply apply the styles like in my last example, but I want to give developers the option to add classes like btn-primary (which adds additional styles).

I thank everyone in advance for taking their time to look into my problem. Hopefully someone can assist me with that problem.

Hope you have a great day!

PS: The link to the repo: https://github.com/z3ttee/alliance-ngx/tree/issue/tailwind/projects/alliance-ngx (you may want to use the branch issue/tailwind)

Upvotes: 2

Views: 838

Answers (1)

Tonio
Tonio

Reputation: 5004

I found a solution, let's say the component you publish is called ui-components.

Modify your tailwind config on the parent project (the one using your component) to have something like this:

module.exports = {
  content: ['./src/**/*.html', './src/**/*.ts', './node_modules/ui-components/**/*.{html,ts,js}'],
  variants: {},
  plugins: [],
  corePlugins: {
  },
};

Upvotes: 1

Related Questions