Tailwind CSS class sorting

[michaelhays]

(Rome discussion: rome/tools#3672)

It would be great to have support for sorting Tailwind CSS classes, like https://github.com/tailwindlabs/prettier-plugin-tailwindcss.

For the time being, I'm using https://github.com/okonet/lint-staged, with the following config:

const config = {
  '*.{js,json,jsx,ts,tsx}': [
    'prettier --write',
    'biome format --write',
    'biome lint --apply',
  ],
  '*.{css,html,md,mdx,yml,yaml}': ['prettier --write'],
}

export default config

This way, before committing, we first format committed files with Prettier (which sorts the Tailwind CSS classes with prettier-plugin-tailwindcss), and then format them again with Biome to make sure the formatting is consistent.

[ematipico]

There was some interest, but we would need to understand what's the logic of their formatting

[Gyurmatag]

When this will be implemented? This is the only one that blocks me to use this.

[ematipico]

@Gyurmatag when there's some interest, and someone wants to implement the logic. We're happy to help people with onboarding to the project.

[estubmo]

I'd be interested in working on this.

[ematipico]

I agree 👍

[kharann]

Sorting inside of JSX is nice, but there's a lot of people using libraries as tailwind-merge, classNames and class-variance-authority. It's been quite nice to be able to sort in function calls and template literals. prettier-plugin-tailwindcss solved this by allowing, in the config, to specify what is a "tailwind function". Once the specified function wraps the node, it will be sorted.

In the original tailwind and plugin, everything that's prefixed by a specific keywords such as class, className will be sorted. Therefore I think a solution that looks for specific function names is more flexible than just looking inside JSX

[kharann]

Personally, I would love to be able to sort inside of my variables or use cva to be able to create variants. Whaat do you think @estubmo @ematipico

[ematipico]

It seems we have a lot of information that we can use now, let's wait for the first implementation from @estubmo , that will be a good starting point

[DaniGuardiola]

@estubmo mind sharing the status of your work? i'd be happy to help, if that's useful to you. this is the only thing stopping me from switching to biome in all my projects.

[p7gg]

That would be really, really awesome to have.

[ImBIOS]

TailwindCSS class name sorting is one of the big reasons that keeps my company and myself in my project from adopting Biome and migrating from Prettier x ESLint.

[michaelhays]

FWIW, I'm still using the lint-staged approach described in my initial post, and it's been working well for me.

I know it may seem somewhat silly to use Biome at all for formatting if you still need Prettier to do the Tailwind sorting, but there's a meaningful difference in the "format on save" duration when switching from Prettier to Biome, which is a nice improvement for my workflow.

Obviously many of us would like to see this implemented directly in Biome, but I wouldn't let it stop you from trying it out.

[ImBIOS]

Woah, nice. If you say it's still worth trying, I planned to try it today with your biome + prettier (tailwind) configuration using lint-staged. Thanks for sharing the workaround and for the suggestion.

I normally use tailwind sorter using ESLint tho, so I might try your config using eslint tailwind sorter, in this way I can use className utilities.

[shrikantkalar023]

This would be pretty dope !!. Really like the prettier sorting of tailwind classes. Using Biome in all my backend projects. Once this is done I will also be able to shift fully to biome.

[kharann]

For those who havent noticed this might be in progres #1362

[DaniGuardiola]

it is

[ematipico]

Closing. Follow #1362 for updates

[DaniGuardiola]

i suggest "accepting as answer" for visibility, if that's an option

[MikeJakuszewski]

This would be great! Any idea when it would be implemented?