If you are wondering how to use Tailwind CSS in an Angular CLI project and automatically create an optimized CSS bundle during production builds, y...
For further actions, you may consider blocking this person and/or reporting abuse
Great article, thanks Michael!
I've written an article inspired by yours, explaining how to integrate Tailwind in a Nrwl NX project and with Storybook as well: medium.com/@dSebastien/adding-tail...
I was trying to follow this guide, but I get an error with the webpack config file saying: `An unhandled exception occurred: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
. Any ideas - copy pasted theextra-webpack.config.js` file, using Angular 10Fine Job, Michael!
The genius of this post is the section: "Separating Tailwind CSS from the rest".
For those of you who have struggled with the other 4 or 5 other Angular/Tailwind examples out there - save your yourself the headache of installing additional
postcssloaders to accommodate your custom or nested scss, or file/image loaders to find relative paths like,url(my.png), and the same with font references. Phew!It just makes so much sense to isolate Tailwind and target it only with a custom webpack config.
Again, Kudos!
This is a very helpful post. Thanks a lot Michael.
There's a bit of a typo though, but it's no biggie. On the section of modifying the serve section,
ng config projects..architect.serve.builder @angular-devkit/build-angular:dev-server
it should be,
ng config projects..architect.serve.builder @angular-builders/custom-webpack:dev-server
Oh, thanks a lot for catching it. Fixed.
I get error in angular 9 :
ERROR in Cannot read property 'flags' of undefined
how ti fixed ?,
thanks
Did you fixed it? I'm facing the same issue
Actually this works exactly like described in the post. The styles.(s)css where material is added is not touched by this approach.
So, after you completed the steps above do
answer a few questions and you're done.
Unfortunately,
ng adddoesn't work because we have changed the builder:Your project is not using the default builders for "build". The Angular Material schematics cannot add a theme to the workspace configuration if the builder has been changed.You can add the styles in yourself:
For example, under architect, build, add indigo-pink.css to your styles array:
"styles": [
"src/styles.css",
"src/tailwind.scss",
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
],
Thanks @beavearony ! Now we can do this automaticaly with schematics 😇
ng add @garygrossgarten /ngx-tailwind
Thank you very much for this Michael!
Useful, thanks.
Thank you. Very straigthforward.
Hi! I need to import my custom-utilities-components in my project. I import my file into tailwild.scss but it doesn't work.
Link: tailwindcss.com/docs/adding-new-ut...
Hi Michael,
I've seen new angular 9 apps using Tailwindcss without the need to touch webpack, or to install @angular-builders/custom-webpack, how do they work ?
Oh, sorry, I just got that this tutorial was about triggering simultaneously Tailwind build at "ng serve" command execution.
Hi Thanks Michael, this is what i was looking for days! i followed all steps however it seems that my tailwind.scss file is not importing tailwind library. anyidea why this could be happening?
nevermind! i reran ng serve again and it worked! :)