DEV Community

Discussion on: Angular 8/9/10 + Tailwind CSS Guide

Collapse
 
seankerwin profile image
Sean Kerwin

I do just that! I use material for things like Modals/Dialogs and Snackbars and Tailwind to style everything.

I don't actually include the Material CSS into my application!

Collapse
 
ryanhedges profile image
Ryan Hedges

This is encouraging but I haven't been able to get Angular/Material and Tailwind to work together with this config. It's possible I'm misunderstanding the build process in Angular 9.

If Tailwind is installed this way before running add for Material it warns you that you are not using the default builder and can't add Material.

If you add Material before tailwind, it borks on @import '~@angular/material/theming'; (which the add command adds for you) in styles.scss with Failed to find '~@angular/material/theming'.

Can you share how you have your projects set up to get them to work together?

Thread Thread
 
seankerwin profile image
Sean Kerwin

Oh I forgot to say. You need to add material first, double check all is working and then add tailwind.

Doing it the other way causes issues with webpack

Thread Thread
 
zuratama profile image
Pepperwood

I found the solution to this angular theme and tailwind conflict.
change '~@angular/material/theming' to either '~@angular/material/_theming.scss' or
'relative_path_to_node_module (../../node_modules/@angular/material/_theme.scss'

html.developreference.com/article/...