Developers tend to have different opinions on how TailwindCSS classes should be sorted and that may cause issues in larger teams. BUT i found a solution.

What is Tailwind?

TailwindCSS is a powerfull utility-first CSS framework that has become more and more popular since it's first release in May 2019, and with good reason too! It is quite easy to learn if you have basic CSS knowledge and when you first get the hang of it, it will increase your productivity massively.

Tailwind works within small project and teams but also scale very well to larger enviroments. I have worked with Tailwind in different team sizes and the first thing i noticed was that developers tend to have different opinions on how to sort Tailwind classes.

The potential issue

When developers sort classes differently, it can be more challenging and time consuming to make changes to other team members work. Below is a simple card UI made with HTML and Tailwind. This is just a basic example of how many classes a single element can have. The classes is not sorted in any particular way.

  <div class="max-w-sm rounded-xl overflow-hidden shadow-lg mx-auto mt-12">
    <img class="w-full" src="https://images.unsplash.com/photo-1506102383123-c8ef1e872756?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Sunset in the mountains">
    <div class="px-6 py-4">
      <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
      <p class="text-gray-700 text-base">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
      </p>
    </div>
    <div class="pt-4 pb-2 px-6 ">
      <span class="rounded-full inline-block  px-3 py-1 font-semibold bg-gray-200  text-sm text-gray-700 mr-2 mb-2 md:font-bold lg:font-semibold">#photography</span>
      <span class="inline-block px-3 py-1 text-sm bg-gray-200 font-semibold rounded-full  mr-2 text-gray-700 mb-2">#travel</span>
      <span class="bg-gray-200 rounded-full inline-block  px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
    </div>
  </div>

Imagine you have to change the font-weight of one of those spans. When there is no order and sorting, you have to start from the beginning and look through every class name to find the one you need to change. Maybe there are multiple font-weights classes but for different viewport sizes and that makes it even more complicated.

Therefore we need to sort the classes to make our job easier.

VScode Prettier + Tailwind

TailwindCSS have created a plugin that works together with the popular Prettier extension for VScode. It automatically sort the classes when Prettier format your code, and that works great!
BUT what if your team members use PhpStorm, IntelliJ, Atom or a completely different code editor, which does not have the Prettier extension?

Enter Rustywind!

Rustywind isen't a plugin or an extension for a particular code editer, therefore all team members can use this tool despite different code editor preferences. Rustywind is an opinionated class sorter CLI tool (inspired by Headwind).

Setup

First step is to install the CLI tool.

npm install -g rustywind
or 
yarn global add rustywind

Now we can use the commands that comes with Rustywind to sort our Tailwind classes. This command will sort every file in our project.

rustywind --write .

Below is the code example from earlier but after i ran the command. The classes is now sorted.

<div class="overflow-hidden mx-auto mt-12 max-w-sm rounded-xl shadow-lg">
    <img class="w-full" src="https://images.unsplash.com/photo-1506102383123-c8ef1e872756?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Sunset in the mountains">
    <div class="py-4 px-6">
      <div class="mb-2 text-xl font-bold">The Coldest Sunset</div>
      <p class="text-base text-gray-700">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
      </p>
    </div>
    <div class="px-6 pt-4 pb-2">
      <span class="inline-block py-1 px-3 mr-2 mb-2 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full md:font-bold lg:font-semibold">#photography</span>
      <span class="inline-block py-1 px-3 mr-2 mb-2 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full">#travel</span>
      <span class="inline-block py-1 px-3 mr-2 mb-2 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full">#winter</span>
    </div>
  </div>

What if i don't like the sort order?

You can create a config file with a custom sort order. Create a file called config_file.json. This file will use JSON and have a top level entry of sortOrder which is an object with an array of Tailwind classes.

{ "sortOrder": 
   ["class1", "class2", "etc..."] 
}

Then run:

rustywind --config-file config_file.json

Now Rustywind knows how to sort the classes based on the new config file.

Creating a custom command

In this example below i have setup a custom script command called rustywind-fix in a Vue, Nuxt project. Then i can run npm run rustywind-fix and the project will be sorted. This command is accessible for all team members to use after they run npm install. Rustywind works for other JavaScript frameworks too, nut just Vue.

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start",
    "rustywind-fix": "rustywind --write ."
  },

npm run rustywind-fix

A good rule of thumb is to use the command before pushing changes to your repository with Git. That way you ensure the classes is sorted before pusing and you avoid that the next developer who runs the command, dosen't end up with a bunch of merge conflicts!

Conclusion

By adding the Rustywind CLI tool to your workflow you save time and avoid potential issues. Let me know if you find this tool usefull or if this would solve any problems for you.

References

TailwindCSS: tailwindcss.com
Rustywind: github.com/avencera/rustywind