Angular CLI + TailwindCSS + PurgeCSS

This article describes how you can integrate your Angular application with TailwindCSS and PurgeCSS using the Angular CLI.

I usually like to write my own custom CSS so I was a bit skeptical when a friend of mine told me about this new cool CSS utility framework that its becoming ever more popular called TailwindCSS. As I always like to try new stuff, I started to play around with it and I loved it.

TailwindCSS gives you the freedom to write your own CSS but boosts your productivity by enabling you to write less CSS through utility classes and provides a non-style-opinionated base for your project. A simple example:

It works great combined with PurgeCSS to make sure the final application bundle only has the necessary classes actually used by the application.

Install dependencies

To run this setup we will need these libraries:

1. @angular-builders/custom-webpack + postcss-scss: To use the Webpack post-css loader without ejecting the Angular CLI;
2. tailwindcss: The CSS utility library;
3. @fullhuman/postcss-purgecss: The CSS optimiser library;
4. stylelint + stylelint-config-recommended: Since usually IDEs have default validators for SCSS files and they don't recognise TailwindCSS's @apply directives, we can add support for Stylelint in our project and add an exception to Tailwind.

To install them all just run:

npm install -D @angular-builders/custom-webpack postcss-scss tailwindcss @fullhuman/postcss-purgecss stylelint stylelint-config-recommended

Setup the configurations

Tailwind configuration is done through a javascript file, and allows you to setup primary and secondary colours, spacing, screen sizes for media queries etc. For more details check here.

Example of a Tailwind configuration

Since we want PurgeCSS only to run while bundling the final application, we are going to have two separate Webpack configurations:

• The dev configuration is only used for when you run are locally developing to add support for TailwindCSS.

• The second configuration is used when you do npm run build, to add TailwindCSS support and remove unused classes from your CSS bundle using PurgeCSS (a more detailed guide can be found here).

All these configuration files I decided to place them under the root in a configs folder to create consistency, but its up to you.

Change Angular schematics

Now we need to change our angular.json file so that the previously defined Webpack configurations are targeting the right purpose.

Here we can see that we no longer use the default @angular-devkit to build and serve our application, but the @angular-builders/custom-webpack library instead. This allows us to add a path to our custom Webpack configuration which we want to extend to compile Tailwind in a post-css plugin.

That's it! Start using Tailwind!

Now all tailwind helper classes can be added to the component's HTML file.

Or use the @apply directive in the SCSS file without any additional imports.

The visual result of this demo is exactly the same as seen in the TailwindCSS home page. To run it just get the code and try it!

Tailwind IntelliSense in VS Code

A must have for a productivity boost in VS Code is to install this extension that autocompletes all your classes defined in your configuration file and automatically picks up any changes to it.

Stylelint for SCSS validation

Since the default SCSS validator present in modern IDEs don't consider TailwindCSS directives like @apply as valid, we must disable it and add Stylelint to validate our SCSS. This is done by adding a stylelint.config.js file to the root of our project with the right configurations to ignore Tailwind's directives. The IDE automatically picks it up as the default validator.

Summary

If you want to be more productive in defining the look and feel of your Angular application, but don't want an UI opinionated library like Bootstrap or Material Design, TailwindCSS might be the solution for you. Also, with PurgeCSS you guarantee that all unused CSS classes are removed from the final bundle (The styles.css file for this demo has only 5KB).

Check out the repository with the full working demo here:

jedmundo/angular-tailwind-purge

Hope this helps and thanks for reading!