Sometimes it is necessary to have class names in arbitrary strings. It would be great to be able to sort them using the Tailwind CSS Prettier plugin.

Examples:

var className1 = 'sm:p-1 p-0';
let className2 = "sm:p-1 p-0";
const className3 = `sm:p-1 p-0`;
let obj1 = {
 className: "sm:p-1 p-0",
};
let obj2 = {
 ["className"]: Math.random() >= 0.5 ? "sm:p-1 p-0" : "sm:p-2 p-1",
};

This was also requested in tailwindlabs/prettier-plugin-tailwindcss#97.

Implementation ideas

Comments

By @jamescmartinez:

// prettier-plugin-tailwindcss
const base = "mb-4 text-white"

Via the Tailwind CSS Intellisense plugin

There was also a discussion about implementing sorting functionality in the Tailwind CSS Intellisense plugin. I'd advocate against that because:

• A lot of devs use Jetbrains IDEs instead of VS Code (myself included).
• It cannot be automated using tools such as husky and lint-staged.