This is an update to my previous article on how to set up TailwindCSS with Angular 10. Apparently, packages since got updates, which change some of the steps required. Also I’ll show you a hassle-free one-line-solution that takes care of all the configuration. Amazing content coming up!
The easy way
First let me show you the lazy man’s solution. From within your project folder simply call:
This will install all the necessary packages as well as add and update configurations accordingly. When being promped, select SCSS as your “stylesheet flavor”. That’s right, that’s all there is to it. Thanks to the awesome team from ngneat for providing this!
You could stop here, but if you want to know what exactly is happening “under the hood” not least to be able to tweak things down the road, you should keep on reading!
For this tutorial I assume you already have Angular 10 installed on your machine. You can check the official documentation if you don’t or this tool if you need to upgrade. You can either follow along with your existing project or create a new one from scratch by running:
This creates a project named
angular-tailwind-example for us. You may call it however you like, just make sure to set it accordingly in some of the folling commands.
Setting up the configuration
We still need two files to control our Tailwind setup:
webpack.config.js. The content differs greatly, however.
First, create a file named
tailwind.config.js in your project’s root and enter the following content:
Next create a file named
webpack.config.js, also in project root, with the following content:
The end result of what those files do is exactly the same as in the previous version, but now we’re leveraging Tailwind’s integrated purging instead of setting it up ourselves
As before, to let Angular know about our custom config, run the following commands (after adjusting the
angular-tailwind-example part to match the name of your project):
angular.json is updated to use the custom configs and you’re ready to
Congratulations! You just successfully set up TailwindCSS in Angular!
The current solution outlined in this post is far superior to the previous one because we can use up-to-date dependencies and leverage more built-in functionality instead of implementing our own, which usually saves us some trouble and compatibility issues. When going the ngneat/tailwind route, things could hardly get any easier and I would highly recommend it simply for being less error prone.
Did this setup work for you? Do you have an even easier way of doing it? Let me know in the comments!