IMPORTANT UPDATE: Since the release of this article, some things changed, so the solution described below will very likely no longer work. But don’t worry, I got you covered with my follow-up article!
Some time ago I started using Tailwind CSS to style my web projects. But while Tailwind is a pleasure to use, it was a major pain to get it to work nicely with Angular.
Assuming you have your Angular app installed, in the app’s root folder run:
@2.1.1 there solved an issue I spent hours upon hours trying to fix. Most tutorials I found on the web omitted the version tag and seemed to be working fine – when they were written. But as it happens, just 4 days before I attempted my installation, postcss-scss got an update to 3.0.0 which apparently showed some incompatibilities with the rest of the setup leading to all kinds of cryptic error messages.
which will create a file called
tailwind.config.js in your app’s root directory. Make sure the file’s content looks like this:
The purging part is very important, we’ll come back to that in a bit.
Next create a
webpack.config.js, also in the app’s root, like this:
What this does is using
autoprefixer to add all the necessary vendor prefixes to your styles, then using
tailwindcss to process the Tailwind classes and then run everything through
postcss converting SCSS to plain CSS.
One of the most important steps, however, is using
purgecss to get rid of unused classes. More on that in the next section.
You can get Tailwind CSS to work without
purgecss, but I would definitely not recommend it. Utilizing it brought the size of my bundled
styles.scss from ~2.2MB to ~15kB in one of my projects, so the difference is quite significant!
Now that we have a lot of new files in place, we have to actually let Angular know they exist. You could go ahead and edit your
angular.json manually (as I did on my first couple of attempts – not particularly joyful!) or simply run the following commands (make sure to adjust the
angular-tailwind-example part of each line if necessary:
Last thing to do is to incorporate Tailwind into our
styles.scss by putting the following right at the top:
You should now be all set up to use Tailwind CSS in your Angular project. I hope you found this tutorial before wasting valuable hours of your life trying to make sense of the mess you created! Head over to their amazing documentation to learn more about how to leverage Tailwind to its full potential. Do you get stuck setting up Tailwind (things might likely not be up-to-date 6 months from now^^), please let me know in the comments so we can update this guide!