Biome's class sorting took me longer than it should have

Intro

I set up Biome for a small Next.js app and felt great about it. Then I realized a few days later that the class name sorting I'd configured wasn't doing anything - and the reason was... embarrassingly simple.

Why Biome?

Around mid-2024, I heard about Biome as a replacement of prettier and eslint.

My co-worker is suspicious about it, "will it have all the same eslint plugins?"
Also, for Svelte, it is experimental phase - still in April 2026 - so I really haven't had a chance to use it.

Then, suddenly I had to create a simple Next.js app. When I was running create next-app, it has an option to select biome. So why shouldn't I try it now. 😎

It works great for default setting.

"lint": "biome check",
"format": "biome format --write",

Tailwind css class sorting

I decided to use tailwind css for styling the app so I wanted to sort the class names like prettier plugin.

so I added useSortedClasses

  "linter": {
    "rules": {
      "nursery": {
        "useSortedClasses": "error"
      },
    },
  },

It was a linter 😇

Few days passed, I realized that the class isn't sorting.

Well... I remember some of the class order... so I write that way... you know... so...

Okay I admit. I ignored them a while.

After most of the coding finishes, I run

pnpm format

And... it didn't sort. 😱

I searched about sorting, couldn't find anything.

I was checking document and config file... I copied official document setting to linter...

Yes, I run formatter, not linter... Because the one I've always using is prettier plugin.

Embarrassing 🫣

Anyway I run lint.

pnpm lint

I got tons of errors 😱

Running linter

Since I had so many errors, I ended up installing the Biome Extension for VS Code too — suddenly red underlines everywhere 😅

To fix them I run

pnpm lint --write

It fixes some of the errors but not sorting.

After the sorting error, there is a message: Unsafe fix: Sort the classes.

Humm... unsafe 🤔

Unsafe fixes may change the semantic of your program. Therefore, it’s advised to manually review the changes.

npx @biomejs/biome lint --write --unsafe ./src

According to official document, class sorting is categorized as unsafe change. So I need to use --unsafe tag.

I just add new script in package.json

"scripts": {
  "lint:fix": "biome check --write --unsafe",
}

pnpm lint:fix

Now it sort class names 🎉

Alternative approach

You can configuring as a safe fix. More details see docs.

  "useSortedClasses": {
    "level": "error",
    "fix": "safe",
    "options": {...}
  }

Then run with --write

pnpm lint --write

This also works 🎉

Conclusion

Biome confused me more than I expected, but that was mostly my fault for not reading which script did what. The lint:fix alias is staying in my projects from now on. I'd reach for it again on the next project. Just read the docs before assuming the formatter does everything. 🤭