Get Started with Tailwind CSS for Angular v12

Tailwind CSS is an easy-to-use CSS framework for quick UI development on anything from small projects to enterprise level applications. It's great for all CSS experience levels and since Angular v12 finally offers support for Tailwind, there's nothing getting in the way of giving this excellent framework a try. Here's a primer on Tailwind's features and how you can set it up with Angular v12. 

What is Tailwind?

Tailwind is a utility-first CSS framework containing a vast catalog of micro CSS classes that speed up your UI development. 

Micro CSS classes are a collection of CSS styles you can use to accomplish a specific styling need which significantly speeds up UI development. A micro CSS class can range from something as simple as:

.static {position: static}

to something more detailed like:

.inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px
}

Why Use Tailwind?

Tailwind has grown increasingly popular over the years  because of these features developers love:

• Dark Mode: Modern operating systems have light and dark modes. Tailwind makes it easy for you to style your UI differently when dark mode is enabled. 

• Optimized for Production: Tailwind optimizes the final style bundle size by removing unused classes so you end up with a smaller build size. 

• Easily Customizable: Tailwind comes with a set of directives and functions that further your ability to customize this framework.

• Continuous Support: When adding an external library to your project, you need to be concerned about security and continued support. Tailwind is supported by a large team of talented developers who ensure that Tailwind is extremely secure and provide continuous support and updates.

• Reduced Learning Curve You don't need to be a CSS expert to take advantage of Tailwind. With basic CSS knowledge, you can use all the various utility classes it provides to create modern-looking web pages.

• Completely Configurable: Tailwind is designed with the ability to configure every single aspect of the framework in its configuration file. 

• Just-in-Time Mode:> Tailwind has a just-in-time compiler that generates your styles on demand. You get faster build times and better browser performance while you're developing.
  
  NOTE: This feature is still in preview. 

Setting up Tailwind with Angular v12

Are you ready to try Tailwind? Setting up Tailwind in Angular v12 involves these simple steps:

1. Install Tailwind using npm or yarn

To install Tailwind,  run one of these commands in your terminal 

npm install -D tailwindcss

or

yarn add tailwindcss -D

2. Generate the Tailwind Configuration File

In the root of your Angular project, run this command in the terminal to generate the Tailwind Configuration File using the Tailwind command line interface (CLI).

npx tailwindcss init

3. Optimize performance 

You should change two settings in tailwind.config.js.  

First, enable just in time mode. Set the mode option to jit

// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: [
  // ...
  ]
  // ...
}

Next, enable purge to ensure Tailwind removes all unused CSS classes and results in a smaller sized style bundle. You also need to provide the path to any files that consume the TailwindCSS classes.

// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: {
    enabled: true,
    content: ['./src/**/*.{html,ts}']
  }
 }

4. Import Tailwind

Add these imports to your Global style file.

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

Tailwind + Other UI Frameworks

Tailwind generally works well with popular frameworks like Bootstrap, Angular Material, and others. But there are some issues you might run into:

Class Name Overlap: Most UI frameworks, such as Bootstrap, have their own sets of utility classes. The names of these classes can clash with Tailwind's utility class names.

For example, the class name mb-10 is present in both Bootstrap and Tailwind. This might be a problem when you are using both frameworks in the same project.

It's an easy fix. To avoid class name overlap, you can add a unique prefix to Tailwind classes in the tailwind.config.js file, for example tw.

// tailwind.config.js
module.exports = {
  prefix: 'tw',
}

 <span class="tw-text-gray-800 tw-font-medium">Welcome</h1>

// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  },
}

Try it Out

Add this code to your HTML file in any of your components:

<button class="py-2 px-3 m-2 bg-blue-500 hover:bg-nav-hover-blue rounded-md text-white">Click Here!</button>

When you view the page you should see a blue button like this one:

Group Classes

If you don't like having a lot of classes added to your HTML tags or if 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 class. It should look like this:

.tw-blue-btn {
  // apply group style
  @apply py-2 px-3 m-2 bg-blue-500 hover:bg-blue-700 rounded-md text-white;
}
<button class="tw-blue-btn">Click Here!</button>

Conclusion

You've seen what Tailwind has to offer, how it's highly customizable and configurable, optimizable, and designed for modern UIs. You've installed and configured Tailwind in your Angular v12 project, and confirmed that it's working.

Next, you should check out Tailwind and Angular in action. Here's a demo restaurant ordering app and its source code: 

• https://tailwindcss-angular.web.app/
• https://github.com/ishedu/tailwind-angular
  

And finally, here are some great resources to get you started:

• Tailwind Official Documentation
• Tailwind Useful Tools
• Tailwind Cheatsheet