My tailwind automation setup

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Search for a command to run...

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
No comments yet. Be the first to comment.
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

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 really help with this process.
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.
If 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:
Basically, what we see from the Headwind plugin. However, this sorting algorithm is a little bit different. I would suggest if you are using this ESLint plugin, turn of Headwind for that project.
Make sure no custom classes are used. You can, however, create a whitelist of classnames that are valid.
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 let you know.
Tailwind is great 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 my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter