Angular component specific styles to use tailwind @apply function

user_3612205 0
Viewed 732

Most of the tutorials and articles are using approach to import tailwind dependencies in styles.scss

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

And then write custom styles with @apply function in custom-components.css or some separate file in global level.

But what if I want to use @apply function with tailwind in my component scoped styles? Is that possible?

Currently either my f.x. custom-component.css is polluted with different component styles, or component html is polluted with many classes.

BR

tailwind-css angular css
1 Answers

I used @ngneat/tailwind to add tailwindcss to my angular project and I could use @apply in my scss file of component.

However, it seems like nesting is not working all the time for me and, most important, dark variants is not working as well (here is the explanation).

Tailwind's documentation about components is to avoid using custom classes and just keep tailwind classes in the html if it's complex and only used in one component.

user_88145850
Related