Tailwind CSS with Angular V12- What You Need to Know

#tailwindcss #angular #tutorial #css

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:

 .static {
  position: static
}

to something more complex like:

.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.

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
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
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
Easily Customizable : Tailwind comes with a set of directives and functions that further improves your ability to customize the framework. Learn More
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.

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

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

Now, when using tailwind classes, make sure you include the added prefix.

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

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.

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

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

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

npm install -D tailwindcss
#or yarn
yarn add tailwindcss -D

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

npx tailwindcss init

For optimal performance, enable the following in your tailwind.config.js file.

Enable Just in Time Mode : This will enable Just in Time Mode, optimizing build time and ensuring better browser performance while developing.

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.

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

Add Tailwind to your Global style file

@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.

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

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:

.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;
  }

<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.