DEV Community

Cover image for TailwindCSS & Angular8
Milos
Milos

Posted on

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:

GitHub logo LaptopTheOne / tailwindcss-angular-demo

This is a simple demo on how to integrate TailwindCSS library into the Angular8 application

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
Enter fullscreen mode Exit fullscreen mode

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

npx tailwind init
Enter fullscreen mode Exit fullscreen mode

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) || [],
    }),
  ],
};
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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
    ],

Enter fullscreen mode Exit fullscreen mode

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",
...
},
...
Enter fullscreen mode Exit fullscreen mode

Run

npm run tailwind-build
Enter fullscreen mode Exit fullscreen mode

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                  |
+--------------------------------------------------------------+
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Now run

npm start
Enter fullscreen mode Exit fullscreen mode


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

Alt Text

Also you can run:

npm run tailwind-watch
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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                  |
+--------------------------------------------------------------+
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (2)

Collapse
 
chandlerbaskins profile image
Chandler Baskins • Edited

Just started doing Angular and was wondering how to bring tailwind with me. Thanks for the post!

Collapse
 
milosdukic profile image
Milos

Cheers happy coding :)