Subscribe

My tailwind automation setup

✍️

Two amazing things to make Tailwind development easier

28 Nov, 2021 Β· 2 min read

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

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

Click here to install the plugin

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

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

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.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next πŸ“–

Creating an animated wave line with Tailwind CSS

10 Mar, 2022 Β· 4 min read

Creating an animated wave line with Tailwind CSS

Tailwind CSS Numeric font variants

9 Mar, 2022 Β· 3 min read

Tailwind CSS Numeric font variants

Join 1900 devs and subscribe to my newsletter