Tailwind css is not working in angular components

Question

I have implemented tailwind css inside my angular project. Tailwind css is working at root level in project, but it is not working in the scss placed inside any components. Do I have to build every scss file inside the components? or is there any permanent solution for that?

How do you import tailwind only in your app.component.scss or also in styles.scss? I think could be something wrong in the way package has been imported! Check this guide if you haven't yet: dev.to/seankerwin/angular-8-tailwind-css-guide-3m45 — Merack
– Merack, Commented Mar 4, 2020 at 11:53
I go through the above link and it is working till root level only. To build style css I have created output.css and build it to style css. Now tailwind is working for style css because build code is written for it. I have no idea about how to build css inside any components. — Hardi Shah
– Hardi Shah, Commented Mar 4, 2020 at 11:57
@HardiShah can you maby provide us with a more clearer explanantion? I'm facing the same issue. Where code in my components is not getting any styling. While I move the div out of a component (Google Chrome) I see the html styled and all. — Leroy Meijer
– Leroy Meijer, Commented May 11, 2020 at 15:40

Chellappan வ · Accepted Answer · 2021-02-11 15:03:00Z

1

Update

Finally in Angular CLI v11.2 now supports tailwind out of the box

# install tailwind
npm install --save tailwindcss
# create `tailwind.config.js`
npx tailwindcss init

Then disable view encapsulation of the component

answered Feb 11, 2021 at 15:03

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tailwind css is not working in angular components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related