Setup TailwindCSS in Angular the easy way
Tags: angular, css, javascript, frontend
Published: 2021-02-11 07:04:05

In this tutorial, I'm going to show you how to integrate TailwindCSS to your Angular project the EZ EZ way.

This tutorial is for people that want to work with TailwindCSS in their Angular application with the new released version `11.2.0` (comes with native support for TailwindCSS now 😉) or with with older versions.

**YOU CAN SKIP THE 💩 AND GO STRAIGHT TO THE INSTALLATION STEPS**

<h2>Content</h2>
* What is TailwindCSS?
* How does TailwindCSS work?
* Advantages of TailwindCSS
* Disadvantages of TailwindCSS
* Installing TailwindCSS (Angular version < `11.2.0`)
* Installing TailwindCSS (Angular version >= `11.2.0`)
* Making sure TailwindCSS is working in Angular
* Purge Tailwind in Angular prod build

<h2>What is TailwindCSS?</h2>

> "A utility-first CSS framework packed with classes like `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup." - Tailwind team

<h2>How does TailwindCSS work?</h2>
TailwindCSS is different than other CSS frameworks like Bootstrap. It comes with a set of utility classes(CSS classes). This will allow you to create and combine the classes to give your UI the aspect that you want. TailwindCSS allows you to customize their styles in a very easy way to create your own design systems.

<h2>Advantages of TailwindCSS</h2>

* You will spend more time in your business logic rather than your CSS
* Pre-made utility classes ready to use
* You add their classes like you would with any CSS class
* Light weight in production
* Mobile first
* Expandable and customizable 
* Use it the "old school" way by applying their styles into your CSS classes
* Extensions for your IDE
* Well documented
* Well supported by different tools like Vue and React
* You can always inspect the TailwindCSS classes in a website and see the actual CSS code :)
* The naming convention for the classes make sense
e.g
 `space-y-4` it will add a vertical(Y-AXIS) space of 4 pixels between your HTML elements.

<h2>Disadvantages of TailwindCSS</h2>

* I don't recommend it if you are new to CSS, not because is hard but because it makes you lazier. You won't be writing any CSS sometimes just adding classes
* Can make your HTML very dirty. If you add a lot of classes to you HTML element it can get ugly, quick! A solution for this is to create components using the classes from TailwindCSS that way you clean up your HTML


<h2>Installing TailwindCSS (Angular version < 11.2.0)</h2>

<i><strong>If your Angular version is greater than or equal to 11.2.0, you can skip this section </strong></i>

The easiest way to use TailwindCSS in your Angular app with version less than 11.2.0 in my personal opinion is by using the <a href="https://www.npmjs.com/package/@ngneat/tailwind">@ngneat/tailwind</a> npm package. I had a great experience with it (plug and play).

1. First step is to run the following schematic in your Angular project: `ng add @ngneat/tailwind`

2. When asked if you want to enable dark mode select `class`

3. When asked if you would you like to use Tailwind directives & functions in component styles? select `Yes`

4. When asked what TailwindCSS plugins you want to enable, select `forms` and `typography` or all of them. That's up to you.

![angular tailwind](https://dev-to-uploads.s3.amazonaws.com/i/iba6e28rp88mrkuawoa0.gif)

There's 4 parts we need to focus on after we have installed TailwindCSS in our Angular app.

-A new file created `tailwind.config.js` it should look like <a href="https://gist.github.com/devpato/ba3507c91396fe852ffde9c0c93bf437">this</a>
-A new file created `webpack.config.js` it should look like <a href="https://gist.github.com/devpato/0c39042d10993e24c64540696a19bad6">this</a>
-The new `dark` class added to your `index.html` body element

```html
<body class="dark">
  <app-root></app-root>
</body>
```

-Some imports added to your `styles.scss` file

```css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
```

**Note: To turn on purge in your production build follow this tiny <a href="The 2nd screenshot is to turn on purge in production build">tweet</a>**

**OPTIONAL**

Take a look to <a href="https://youtu.be/XFxuKUBUqao">this</a> amazing video created by my friend Beeman. It shows you how use TailwindCSS in Angular in 3 MINUTES!

<h2>Installing TailwindCSS (Angular version >= 11.2.0)</h2>

<i><strong>If your Angular version is less than 11.2.0, you can skip this section and look at the instructions above for installation. If you already performed the previous steps, go to `Testing TailwindCSS in Angular` section below.</strong></i>

1. Install with `npm install -D tailwindcss`

2. Install TailwindCSS plugins(Optional):

  * npm i @tailwindcss/typography

  * npm i @tailwindcss/forms

>Some people are running older versions of the CLI or the @angular-devkit/build-angular. Make sure your package.json looks AT LEAST with version 11.2.0<a href="https://gist.github.com/devpato/d9d360bc9400cbeb0d49f981653c353e">this</a> or have a more recent versions (if available)

3. Create a TailwindCSS configuration file in the workspace or project root. Name that configuration file `tailwind.config.js`

It should look like this:

```javascript
module.exports = {
    prefix: '',
    purge: {
      content: [
        './src/**/*.{html,ts}',
      ]
    },
    darkMode: 'class', // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography')],
};
```

4. In your styles.scss file add the following TailwindCSS imports

```css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
```

if you are using CSS not SCSS, your file should look like this:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

<h2>Making sure TailwindCSS is working in Angular</h2>


Go to any of you components and write the following:

```html
<button
  class="py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-400">Hello</button>
```


Now run `ng serve`, you should see the following button

![angular tailwindcss](https://dev-to-uploads.s3.amazonaws.com/i/tvvo9pqx7ua7yc2kjzhz.png)

If you don't want to have that many classes in your HTML, you can clean it up by putting the TailwindCSS classes in your CSS/SCSS files.

```css
.btn {
    @apply py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-400
}
```
** Notice I'm using the @apply  **

```html
<button class="btn">Hello</button>
```

<strong><a href="https://github.com/devpato/angular-tailwindcss">Github Repo</a> of project running Angular 11.2.0 and Tailwind </strong>

<h2>How to purge TailwindCSS in Production</h2>

If we don't purge, our CSS can be very heavy due to all the CSS classes TailwindCSS adds for you. If you purge, all the unused classes will be removed.

The way I figured to do purging in Angular 11.2.0 are the following ways:

A)  This is my preferred way. Add this to your building SCRIPT `NODE_ENV=production ng build --prod`
and your tailwind.config.js file should look like this.

```javascript
...
purge: {
      enabled: process.env.NODE_ENV === 'production',
      content: [
        './src/**/*.{html,ts}',
      ]
    },
...
```

B) In your `tailwind.config.js file` you can set the `enabled` property inside of the `purge` property to `true`

```javascript
....
prefix: '',
    purge: {
      enabled: true,
      content: [
        './src/**/*.{html,ts}',
      ]
    },
....
```
Then you can run `ng build --prod` and you will see your bundle since getting smaller.

<strong> Before purging</strong>
![tailwindcss purging](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dm6zto6znswiot65a7lp.png)

<strong> After purging</strong>
![purging tailwind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jemgahtbi11mwfbkdfyu.png)


<h2>Special thanks to:</h2>
Contributors of the ngneat/tailwind package:
<a href="https://twitter.com/Nartc1410">Chau Tran</a>
<a href="https://twitter.com/beeman_nl">Beeman</a>

and the other contributors of this awesome package.

Special thanks to Kevin, GDE from Angular Taiwan for helping me debug my issues.
<a href="https://twitter.com/yoKevinYang">Kevin</a>

Special thanks to Vlad, he showed me the purge trick :)
<a href="https://twitter.com/vltansky">Vlad Tansky</a>