TailwindCSS & Angular8

This is a simple tutorial about integrating TailwindCSS library into the Angular8 application.

If you haven't heard of TailwindCSS you can check it out here. In a nutshell TailwindCSS is the upcoming CSS library, which I hope will eventually replace the Bootstrap in the near future. Why would you use TailwindCSS you may wonder? Well first of all it is great for responsive applications, highly customisable, preloaded with, I would say 90% of CSS classes you would normally use to build a web application, etc.
So lets get cracking :)

The complete code can be found on GitHub repo:

First of all you need to create simple Angular8 app and install some additional NPM packages:

ng new tailwindcss-demo
...IMPORTANT! select CSS when asked...

cd tailwindcss-demo
npm i -D tailwindcss postcss-import autoprefixer postcss-cli @fullhuman/postcss-purgecss

After that run following command from the root of the application:

npx tailwind init

This will create new file called tailwind.config.js

Then create new file, also in the root of the application called postcss.config.js and add this code into it:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    process.env.NODE_ENV === 'production' && require('@fullhuman/postcss-purgecss')({
      content: [
        './src/**/*.html',
        './src/index.html',
      ],
      defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
    }),
  ],
};

What this code effectively do is it strips the unused CSS from you application leaving only used TailwindCSS classes.

After this create also one new file in ./src/tailwind-build.css and put this code in:

/* ./src/tailwind.css */

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Open angular.json file and edit like so (there are 2 occurrences that need to be edited one under build other under test key):

// this is under build key
    "styles": [
        "src/styles.css",
        "src/styles-tailwind.css" // add only this line
    ],
// this is under test key
    "styles": [
        "src/styles.css",
        "src/styles-tailwind.css" // add only this line
    ],

In package.json file, add under scripts section following:

...
"scripts": {
...
  "tailwind-build": "postcss ./src/tailwind-build.css  -o ./src/styles-tailwind.css",
  "tailwind-watch": "postcss ./src/tailwind-build.css  -o ./src/styles-tailwind.css --watch",
...
},
...

Run

npm run tailwind-build

and notice that the new file has been created under ./src/styles-tailwind.css. That file is the final output of the tailwind build process and it contains ALL the CSS elements from TailwindCSS. If you investigate a bit, you will notice that this file is ~ 787KiB

+--------------------------------------------------------------+
| Size         | 787.36 KiB                                    |
|--------------------------------------------------------------|
| Gzipped      | 85.43 KiB                                     |
|--------------------------------------------------------------|
| Mime type    | text/css                                      |
|--------------------------------------------------------------|
| Created      | December 11th 2019, 11:49:28                  |
|--------------------------------------------------------------|
| Changed      | December 11th 2019, 11:51:05                  |
+--------------------------------------------------------------+

which is a lot btw. This will be reduces as we progress, don't worry :). And remember we did not even used TailwindCSS anywhere in our project yet, so let's start using it :)

In our app.component.html you can remove everything or add following line at the end of the file (this is just for testing purposes, and to se if we have integrated TailswindCSS properly):

<div class="text-4xl text-center text-blue-500 bg-red-200 mt-8">TailwindCSS Example Works</div>

Now run

npm start

and you should be able to see 'TailwindCSS Example Works' text styled using TailwindCSS.

Also you can run:

npm run tailwind-watch

from another terminal window, and whenever you modify ./src/tailwind-build.css file build process will be triggered automatically, and fresh ./src/styles-tailwind.css file will be created.

What about that size ~ 787KiB?

If you look closer in postcss.config.js file you will notice that when the env is production purgecss will remove any unused css code from all .html files, and therefore the size of ./src/styles-tailwind.css will be significantly reduced. If you run your code in the production environment:

NODE_ENV=production npm run tailwind-build

you will notice that ./src/styles-tailwind.css is now ~ 9KiB which is nice:

+--------------------------------------------------------------+
| Size         | 8.99 KiB                                      |
|--------------------------------------------------------------|
| Gzipped      | 2.86 KiB                                      |
|--------------------------------------------------------------|
| Mime type    | text/css                                      |
|--------------------------------------------------------------|
| Created      | December 11th 2019, 11:49:28                  |
|--------------------------------------------------------------|
| Changed      | December 11th 2019, 13:06:37                  |
+--------------------------------------------------------------+

So make sure that you use this approach when deploying to production.

And that makes the end of this article. I hope you found it useful.
Give TailwindCSS a try, and you will see why it so well accepted by community.

Cheers!