Preston Lamb | ng-conf | Jan 2022

tldr;

TailwindCSS is one the most popular CSS frameworks on the market today. It makes building and styling modern sites easy by combining utility classes on your HTML elements. There is no set style with Tailwind like there are other CSS frameworks. It allows you to start from scratch and build the site exactly as you want. In this article, you will learn one way of including it in your application.

Tailwind in Angular

One of the first things to know about Tailwind is that the main CSS file is huge. If you just shipped the full TailwindCSS file, your site would contain a lot of extra styles that will go unused. For example, I recently included Tailwind in a project and with the entire CSS file, the size was 3.53mb. After purging unused styles, the size of the included CSS file dropped to 10kb, or .2% of the original size. Now, this may not be the result in every application. The one I was working on was extremely small with only two pages. But still, you can expect significant decreases in size by properly configuring Tailwind.

To properly configure Tailwind, you need to have access to the webpack.config.json file to alter the build process of your site. In my opinion, this is one of the main reasons that Tailwind has had a relatively slow adoption rate in the Angular community. By default, applications don’t have access to the webpack build process. Because of that, the process has been a little harder to configure Tailwind. However, new tools, in the form of schematics, are being released that make adding Tailwind to your Angular application easier. My favorite method is by using ngx-tailwind by the folks at notiz.dev. With this, you only need to run the following command in your Angular project to add Tailwind:

$ ng add ngx-tailwind

This will do the bulk of the work for you. It will:

• add ngx-build-plus to the project, which is necessary to use custom webpack configurations

• creates a tailwind.config.js for the project

• creates a webpack.config.js, which is where any extended webpack functionality is added

• configures your projects in angular.json to use ngx-build-plus and the webpack.config.js

• updates the styles.scss file for your application to import what you need from Tailwind for your project

At this point, you are ready to start using Tailwind! But there’s one more thing you’ll need to do to make sure that all the extra CSS is purged from your app when the app is built. In the tailwind.config.js file, there’s a purge attribute that you need to edit. All you need to do is provide the path to HTML files and TypeScript files that may be using Tailwind classes in your app:

// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.html', './src/**/*.ts'],
  …
}

Your application is now ready to be built with ngx-build-plus and to purge the extra CSS from Tailwind. Here’s the build command you should run for production:

$ NODE_ENV=production ng build --prod my-app

For webpack to purge the CSS, it needs to be run in production mode, and that needs to be explicitly set. In production mode, the build process will strip out all Tailwind classes that aren’t being used by your application. This is what caused my app to go from 3.53mb to 10kb. If you don’t do this, the performance of your app will be negatively affected because of the amount of unused CSS that you’re shipping. If you don’t set the environment variable to production, your app will build but will contain all the Tailwind styles.

Conclusion

Tailwind is really intuitive and great to use. It’s not terribly hard to pick up, and it’s powerful enough for you to build any website you could want to build. If you want a great resource for learning Tailwind, check out Chris Sevilleja’s Beginner Tailwind course. It’s great and will help you get accustomed to using Tailwind to build beautiful UIs.

ng-conf: The Musical is coming

ng-conf: The Musical is a two-day conference from the ng-conf folks coming on April 22nd & 23rd, 2021. Check it out at ng-conf.org