# 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](https://biomejs.dev/) 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.

```json
"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](https://github.com/tailwindlabs/prettier-plugin-tailwindcss).

so I added [useSortedClasses](https://biomejs.dev/linter/rules/use-sorted-classes/)

```json
  "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

```bash
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.

```bash
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](https://marketplace.visualstudio.com/items?itemName=biomejs.biome) too — suddenly red underlines everywhere 😅

To fix them I run

```bash
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

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

```bash
pnpm lint:fix
```

Now it sort class names 🎉

## Alternative approach

You can configuring as a safe fix. More details see [docs](https://www.biomejs.cn/en/linter/#configure-the-code-fix).

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

Then run with `--write`

```bash
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. 🤭