Cleaner CSS in your component templates with Tailwind and Headwind

TailwindCSS is not to present anymore: the utility-first CSS framework has gone a long way and is now used in a variety of website such as Proton, Laravel or even GitHub Copilot (and TailwindCSS itself of course)..

However, the utility-first approach tends to make our class attributes a bit verbose.

That itself is not an issue but what might be is the consistency between those classes.

The issue

Let's assume that I'm writing a button wrapped in a container. I might to so:

<div class="flex bg-gray-50 justify-center m-24 p-24">
  <button class="p-2 shadow-xl bg-fuchsia-400 text-white m-5">
    I don't do much
  </button>
</div>

However, if I later have to change the padding of my elements, it would be pretty painful since I wrote the classes one by one, without caring about any order. Unfortunately, by doing so, my classes does not have any ordering logic and we can notice that the classes impacting the same aspect are all mixed-up:

Headwind to the rescue!

This problem is not uncommon and has since been addressed by various tools.

The one I'm using is Headwind which defines itself as:

Headwind is an opinionated Tailwind CSS class sorter for Visual Studio Code. It enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.

The installation is fairly easy and can be done through the Visual Studio Marketplace.

Using it with Angular

Once installed in our VS Code, let's grab our previous code and create a simple component for it:

// demo.component.ts
@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
})
export class DemoComponent {}

<!-- demo.component.html -->
<div class="flex bg-gray-50 justify-center m-24 p-24">
  <button class="p-2 shadow-xl bg-fuchsia-400 text-white m-5">
    I don't do much
  </button>
</div>

And just by hitting save we can notice that Headwind took care of ordering all classes in the same way:

What about templates?

Our component is pretty small and one could want to define its template directly into it:

// demo.component.ts
@Component({
  selector: 'app-demo',
  template: `
    <div class="flex bg-gray-50 justify-center m-24 p-24">
      <button class="p-2 shadow-xl bg-fuchsia-400 text-white m-5">
        I don't do much
      </button>
    </div>
  `,
})
export class DemoComponent {}

Let's hit save and ... nothing changed?

Indeed, headwind cannot recognize that classes in our component template out of the box and we must help it a bit.

In your VS Code settings.json, we can add custom regexp that will help headwind to locate where our classes are. Here are two of them (from bbugh), for .js and .ts files:

"headwind.classRegex": {
  "javascript": "(?:\\b(?:class|className|tw)(?:=(?:{\\s*)?)?(?:\\.\\w*)?(?:\\(\\s*\\w*\\s*\\))?[\\\"\\'\\`]((?:[\\w\\s\\-\\/\\:\\.\\[\\]]|\\$\\{(.*?)\\})+)[\\\"\\'\\`]}?)",
  "typescript": "(?:\\b(?:class|className|tw)(?:=(?:{\\s*)?)?(?:\\.\\w*)?(?:\\(\\s*\\w*\\s*\\))?[\\\"\\'\\`]((?:[\\w\\s\\-\\/\\:\\.\\[\\]]|\\$\\{(.*?)\\})+)[\\\"\\'\\`]}?)"
  }

We can now save again and see headwind in action, just like in our .html!

A better tool for it?

Earlier this year, Tailwind announced the release of a plugin with Prettier.

If we look at the repository history, Headwind did not have any update since mid 2021 (at the time I'm writing this) and seems not to be actively maintained anymore.

It might be a good option to rely on the official plugin from now on since it also has the advantage to be included directly in your project and not to be configured on each development environment along with supporting more actively the new features.

I hope that you learnt something useful there, happy coding!

Photo by lan deng on Unsplash