Angular 11 and TailwindCSS with HMR

Update:

Native support for TailwindCSS finally landed in Angular 11.2.

To make things even easier, continue to use the @ngneat/tailwind package. The setup has been simplified much further the last time this article was written. As a bonus, it now even supports a NX-powered workspace.

$ nx generate @ngneat/tailwind:nx-setup

There does exist a bug, at the moment, that prevents the above command from completing successfully. A simple workaround can be used to overcome this difficulty.

$ nx generate @ngneat/tailwind:nx-setup --project=<your-main-app-name-here> --enableJit=true --darkMode=class --plugins=aspect-ratio,forms,line-clamp,typography

With the release of version 11, Angular has now made it easier to enable Hot Module Replacement (HMR) during development. Literally, with a single flag:

$ ng serve --hmr

To review, HMR is a useful feature offered by webpack that allows development changes to modules at runtime without requiring a full refresh. In the past, in order to do this in an Angular CLI app, you would have to download a dev dependency called @angularclass/hmr then add new configuration as well as update the boostrapping process.

In the case of v11, all the changes above won't be necessary anymore.

When enabled, a running application will reflect the new updates to the components, styles and templates instantly while preserving form inputs and the scroll position. This is really good as it results in an overall faster development feedback.

Now, if you are like me who use Angular with TailwindCSS. You'd know that it uses a custom webpack builder, @angular-builders/custom-webpack. I was keen to know how the new update can benefit and potentially introduce bugs to my Angular x TailwindCSS setup.

Thankfully, whipping up a TailwindCSS-powered Angular CLI app is a breeze nowadays.

ngneat/tailwind

# Create a new Angular app
$ ng new eleven-tailwind-hmr --routing --style scss --strict

# Add the latest tailwindcss and custom-webpack builder, when prompted select scss as the stylesheet flavor.
$ cd eleven-tailwind-hmr
$ ng add @ngneat/tailwind

At the moment, there's a bug with @ngneat/tailwind template after an update to the webpack-merge, so this line, in the generated webpack.config.js, needs to be updated.

- const merge = require('webpack-merge');
+ const { merge } = require('webpack-merge');

A PR that fixes the issue is on the way, so this extra step won't be required soon.

The linked pull request has been merged in the new @ngneat/tailwind version which means that this extra step is not required anymore. In fact, the updated version also automated the integration to the beta version of the custom-webpack builder

Custom Webpack

@angular-builders/[email protected] has been released so this extra step is not required anymore.

We're almost there. Currently, the latest custom-webpack builder (10.0.1) that is added by @ngneat/tailwind is not compatible with --hmr. When you run the app, a warning is thrown in the developer console, saying:

[HMR] Cannot apply update. Need to do a full reload!

We need one last step, which is to update to its --next version. Version 11 of

# installs "@angular-builders/custom-webpack": "^11.0.0-beta.1",
$ npm i -D @angular-builders/custom-webpack@next

Fire up ng serve --hmr again. Finally it works!

As you can see, the feedback is very fast making development so much more fun.

I have a created a github repo for anyone to try it out. Please do so and let me know what you think.