Tailwind CSS with Angular V12- What You Need to Know
Tags: tailwindcss, angular, tutorial, css
Published: 2021-09-01 19:01:21

With Angular V12, comes a much awaited support for TailwindCSS, Tailwind is a utility-first CSS framework that contains a deep catalog of micro CSS classes for faster UI development. 

Micro CSS classes are a collection of CSS styles to accomplish a specific styling need. It can range from something as simple as:
```css
 .static {
  position: static
}
```
to something more complex like:
```css
.inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px
}
```
Tailwind has no UI kit and does not rely on any pattern when working on UI designs, which gives the developers complete control on how to implement UI designs.
<br/>

## Why Tailwind?
* __Just in Time Mode :__  Although this is still being previewed, Tailwind has a just in time compiler that generates your styles on demand. This results in faster build times and better browser performance while developing. [Learn More](https://tailwindcss.com/docs/just-in-time-mode)
<br/>

* __Dark Mode:__ With modern operating systems all having light and dark mode, Tailwind makes it easy for you to style your UI differently when dark mode is enabled. [Learn More](https://tailwindcss.com/docs/dark-mode)
<br/>

* __Ability to Optimize for Production :__ Tailwind optimizes the final style bundle size by removing unused classes. This results in a smaller build size. [Learn More](https://tailwindcss.com/docs/optimizing-for-production)
<br/>

* __Easily Customizable :__ Tailwind comes with a set of directives and functions that further improves your ability to customize the framework. [Learn More](https://tailwindcss.com/docs/functions-and-directives)
<br/>

* __Reduced Learning Curves :__ With Tailwind, you do not have to be a CSS expert. With basic CSS knowledge, you can use all the various utility classes it provides to create modern looking web pages.
<br/>

## Tailwind With Other UI Frameworks
Yes, Tailwind works well with when used with other frameworks like Bootstrap, Angular Material, and others. Yet, some issues you might run into include:

* __Class Name Overlap :__ UI framework like Bootstrap comes with its own set of utility classes which might overlap with Tailwind's utility class names. Consider a class name like `mb-10`, which is both present in Bootstrap and Tailwind. We can clearly see how this might be a problem when using both Bootstrap and Tailwind on the same project.

To avoid classname overlap, Tailwind allows you to add a unique prefix to tailwind in the `tailwind.config.js` file
```javascript
// tailwind.config.js
module.exports = {
    prefix: 'tw',
}
```
 Now, when using tailwind classes, make sure you include the added prefix.
```html
 <span class="tw-text-gray-800 tw-font-medium">Welcome</span>
```
<br/>

* __Remove Tailwind Base Layer CSS Reset :__ By default, Tailwind performs a CSS reset on the page which normalizes and removes browser's default styles. It does this to smooth over cross-browser inconsistencies. When using Tailwind with other CSS framework, this might lead to design issues, especially when being used on an existing project. To avoid this, simply turn off Tailwind preflight layers. This will ensure no CSS reset is done.

```javascript
// tailwind.config.js
module.exports = {
    corePlugins: {
      preflight: false,
    },
}
```
<br/>

##Configuring TailwindCSS
TailwindCSS was designed with the ability to configure every single aspect of the framework. You can add, remove, or edit TailwindCSS to meet your specific needs using the config file. [Learn More](https://tailwindcss.com/docs/configuration)
<br/>

##Tailwind with Angular

With Tailwind now fully supported by Angular with the release of Angular 12, setting up Tailwind in Angular involves these simple steps:

* __Install TailwindCSS using npm or yarn:__
Run this command in your terminal to install TailwindCSS 
```bash
npm install -D tailwindcss
#or yarn
yarn add tailwindcss -D
```
<br/>

* __Generate TailwindCSS Configuration File:__
In the root of your Angular project, run this command in the terminal to generate the Tailwind Configuration File using the [Tailwind CLI](https://tailwindcss.com/docs/installation#using-tailwind-cli)
```bash
npx tailwindcss init
```
<br/>

For optimal performance, enable the following in your `tailwind.config.js` file.
 * __Enable Just in Time Mode :__ This will enable 
[Just in Time Mode](https://tailwindcss.com/docs/just-in-time-mode), optimizing build time and ensuring better browser performance while developing.

```javascript
module.exports = {
    mode: 'jit',
    purge: [
      // ...
    ]
    // ...
}
```

* __Purge Unused CSS Styles:__ To ensure Tailwind removes all unused CSS classes, enable purge and provide the path to all files that consume the TailwindCSS classes in your `tailwind.config.js` file.  This will result in a smaller sized style bundle.

```javascript
module.exports = {
    mode: 'jit',
    purge: {
      enabled: true,
      content: ['./src/**/*.{html,ts}']
}
}
```
<br/>
* __Add Tailwind to your Global style file__
```css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
```

To confirm that TailwindCSS is working correctly, simply add this to your html file in any of your components.

```html
<button class="py-2 px-3 m-2 bg-blue-500 hover:bg-nav-hover-blue rounded-md text-white">Click Me!</button>
```
![TailwindCSS Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14sxqdttw7bhd3pijkcn.png)
It should look like the above image. If you don't like having a bunch of classes added to your html tags or you plan to reuse the same style on other html tags, you can use the TailwindCSS `@apply` directive to group all the classes in one call. It should look like this:
```css
.tw-blue-btn {
    // apply group style
    @apply py-2 px-3 m-2;
    @apply bg-blue-500 hover:bg-blue-700;
    @apply rounded-md;
    @apply text-white;
  }
```
```html
<button class="tw-blue-btn">Click Me!</button>
```

##Final Words
Tailwind is both an excellent and easy to use CSS framework for quick UI development. It works seamlessly on small projects or enterprise grade projects. Regardless of your CSS experience level, you can easily create a unique and modern looking UI from scratch.

<br/>

##Demo Project
Git: https://github.com/ishedu/tailwind-angular
Live App: https://tailwindcss-angular.web.app/

<br/>
##Useful Resources
[Tailwind Official Documentation](https://tailwindcss.com/docs)
[Tailwind Useful Tools](https://www.tailwindtoolbox.com/generators)
[Tailwind Cheatsheet](https://nerdcave.com/tailwind-cheat-sheet)
<br/>