Great tutorial on how to implement Tailwind within Angular 9. Thanks for the easy to follow Tutorial. I do come across an issue. I see tailwind being loaded correctly but somehow my components are not getting styled. The styling only goes till root level. Any idea what I'm doing wrong?
I'm an intuative and determined software developer who loves to code, I can always find a solution to the problem even if its a stack/language I'm not familiar with. My passion is front-end/UI/UX
This will only work for the style.scss at root level, the custom web pack doesn't know about the deep level component css files so you can't use the @apply method in component level stylesheets.
In fact, you shouldn't do this as a rule of thumb with Tailwind anyway. Creating your own custom utilities at root level is fine to use everywhere like a .btn class globally, but there is no need for component level utilities, just use the classes in the html. There's a really good video from Adam Watham about the best practices of Tailwind.
Hi,
Great tutorial on how to implement Tailwind within Angular 9. Thanks for the easy to follow Tutorial. I do come across an issue. I see tailwind being loaded correctly but somehow my components are not getting styled. The styling only goes till root level. Any idea what I'm doing wrong?
Thanks in advance.
Leroy
This will only work for the
style.scss
at root level, the custom web pack doesn't know about the deep level component css files so you can't use the@apply
method in component level stylesheets.In fact, you shouldn't do this as a rule of thumb with Tailwind anyway. Creating your own custom utilities at root level is fine to use everywhere like a
.btn
class globally, but there is no need for component level utilities, just use the classes in the html. There's a really good video from Adam Watham about the best practices of Tailwind.youtube.com/watch?v=J_7_mnFSLDg