My tailwind automation setup

28 November, 2021 — 2 minute read
permalink

It can quickly become a long string of classes when it comes to tailwind classes, and you might lose an overview.

While working with Tailwind, I've found two amazing things that help with this process.

1. Headwind opinionated Tailwind order plugin permalink

Headwind is a fantastic visual studio code plugin made by Ryan Heybourn.

What this plugin does, is sort classes automatically for you based on a preferred sorting order.

In action it looks like this:

You might think, ok, but why do we need this? And for me, it makes a huge difference to have an opinionated class order. It's a sense of being organized, and it makes it calm to read classes as you know what to expect.

2. Tailwind ESLint plugin permalink

Suppose you want to fully make your project rock solid and independent of users' plugins. You can take it to the next level and use the Tailwind ESLint plugin.

You can find this Tailwind ESLint plugin on NPM

This plugin is created by Francois Massart and provides a couple of excellent rules we can leverage:

classname order

Basically, what we see from the Headwind plugin. However, this sorting algorithm is a little bit different. If you are using this ESLint plugin, I would suggest that you turn of Headwind for that project.

no custom classname

Make sure no custom classes are used. You can, however, create a whitelist of classnames that are valid.

no contradicting classnames

Which is pretty sick. It can often happen that you accidentally add classes that contract, for example: p2 p3. The plugin will fail on this, and it will let you know.

Conclusion permalink

Tailwind is excellent on its own, but when working in teams, it can be a real lifesaver to have tools, like mentioned above, that can help us work uniform.

Perhaps you use other Tailwind helpers? Do let me know as we can always use more.