TailwindCSS & Angular8
Tags: angular, tailwindcss, css
Published: 2019-12-11 15:13:54

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](https://tailwindcss.com/). 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: {% github LaptopTheOne/tailwindcss-angular-demo no-readme %}

First of all you need to create simple Angular8 app and install some additional NPM packages:
```shellsession
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:
```shellsession
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:

```javascript
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:
```css
/* ./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):
```json
// 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:
```javascript
...
"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
```shellsession
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):

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

Now run
```shelsession
npm start
``` and you should be able to see 'TailwindCSS Example Works' text styled using TailwindCSS.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/v51zhrehe9uzae9x5uh2.png)

Also you can run:
```shellsession
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:
```shellsession
NODE_ENV=production npm run tailwind-build
```
you will notice that *./src/styles-tailwind.css* is now ~ 9KiB which is nice:

```shellsession
+--------------------------------------------------------------+
| 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!