Use TailwindCSS via Directive in Angular

Use TailwindCSS via Directive in Angular

Angular has first-class support for TailwindCSS since v11.2. When using tailwind in angular templates, you might want to group some classes to reuse. For example — for a card style, you might have bg-gray-100 rounded-md p-4 shadow hover:shadow-lg hover:bg-gray-50. Sure, you have tailwind’s @apply directive to make your own custom class composed with tailwind classes. But I am going to show you a rather unconventional way of grouping classes and use them in the angular template.

Angular has first-class support for TailwindCSS since v11.2. When using tailwind in angular templates, you might want to group some classes to reuse. For example — for a card style, you might have bg-gray-100 rounded-md p-4 shadow hover:shadow-lg hover:bg-gray-50. Sure, you have tailwind’s @apply directive to make your own custom class composed with tailwind classes. But I am going to show you a rather unconventional way of grouping classes and use them in the angular template.

Styles Map

Let us first create a dictionary of styles. The key names will be used to match and extract tailwind classes and apply them to an HTML element. An example is given below:

The Directive

Create a directive named tailwind and make it globally available, e.g.- by declaring in your AppModule , or if you have a CoreModule that works as the global container module for singleton/reusable stuff.

Tailwind directive

*What is Happening? *We will receive a string as an input into the directive. Notice we are using selector name and input both tailwind. The same selector and input name allows you to attach and get input with a single declaration.

We need a little bit of processing on the input. Instead of OnChanges lifecycle hook, we are utilizing another pattern with getter & setter. This is cleaner compared to implementing inside ngOnChanges method, and runs only when inputs are changed.

Directives have access to the host — i.e. where the directive is applied. We use @HostBinding(’class’) decorator to attach classes attribute to the host.

In the setter, we take the input string and -

  1. Split the string on spaces. Then we have an array of string elements.
  2. For each string element, see if we have a match in our styles map. If we do, then return the mapped larger string (tailwind classes). Otherwise, return whatever the string itself was. So, if the string element was layoutCenter then we get flex items-center justify-center, if it was bla then we get bla.
  3. We join back all the resolved strings again delimited by space.

Usage

Our trickery is done! Time to use it in templates. You use it like this:

Usage of Tailwind Directive

Now you can even apply tailwind classes directly through the tailwind="someclass" directive instead of HTML class attribute (class="someclass") if you want to; I am not the cop! The possibility is endless :)

Pros and Cons

  1. It is much easier to group tailwind classes and use app-wide. You don’t need to make separate directive/wrapper component for each element such as for buttoncard just to apply some style classes in your application.
  2. If there are many styles, the application has to load a big typescript object into memory. Not a big deal, but still should be kept in mind.
  3. Order matters for the custom classes. Tailwind classes contained by the right-most custom class will override that of the left ones. That’s why button buttonSecondary will work as expected, but not buttonSecondary button.

angular javascript tailwind

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular & Tailwind: Q&A

I'll tackle each of those to the best of my ability in this article.

How to Build an Angular Application with Angular CLI

How to set up the Angular CLI and generate a Trivial App

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.