📎 Tailwind class sorting lint rule

[DaniGuardiola]

Update: I'm working on this! Follow the updates in this Twitter thread: https://twitter.com/daniguardio_la/status/1739715412131238122

PRs

• https://github.com/biomejs/biome/pull/1362

Description

Port the TailwindCSS Prettier plugin that sorts Tailwind CSS utility classes. In Biome, it is being implemented as a lint rule that formats classes in JavaScript files though auto-fixes (ref).

Feature support / tasks checklist

Features with an asterisk are not likely to be implemented as part of this task. They are listed for exhaustiveness, and considered in architectural decisions so that future support is possible, but they are not high priority.

Features with a question mark are ideas that I'm not sure about, or I don't know enough about to determine if they make sense or how they could be implemented.

• Visitor:
  • [x] Custom functions (clsx, etc).
  • [x] Custom functions: tagged template support
  • [x] JSX attributes (class and className)
  • [x] Custom JSX attributes
  • [x] Object properties (e.g. in objects passed to clsx)
• Sorting:
  • [x] Utility classes
  • [x] Utility classes: arbitrary values
  • [x] Static variants
  • [x] Dynamic variants
  • [x] Arbitrary variants
  • [x] Arbitrary CSS
  • [ ] Parasite utilities
  • [ ] Screens e.g. md:, max-md: (simple config, px-only)
  • [ ] Screens (advanced config)
  • [ ] Negative values
  • [ ] With prefix
  • [ ] With important prefix (!class)
  • [ ] With custom separator
• Preset/config generation:
  • [ ] Tailwind CSS v3 (WIP)
  • [ ] Tailwind CSS v4
  • [ ] UnoCSS*
• Presets:
  • [x] Tailwind CSS preset
  • [ ] UnoCSS presets?*
• Config:
  • [x] Custom functions
  • [x] Custom JSX attributes
  • [x] Class order
  • [ ] Exclude classes?*
  • [ ] Utilities/layers
  • [ ] Variants
  • [ ] Screens
  • [ ] Preset (Tailwind CSS or no preset)
  • [ ] Extend utilities
  • [ ] Extend variants
  • [ ] Extend screens? (replace might be the only sane option)
  • [ ] Prefix
  • [ ] Separator
• Other features:
  • [ ] Automatic migration/sync tailwind.config.js -> biome.json
  • [ ] Resiliency to UnoCSS variant groups (naive sorting could mangle these) docs?*
  • [ ] UnoCSS variant groups sorting?*
  • [ ] UnoCSS attributify mode sorting?*
• Other tasks
  • [ ] Lint rule documentation
  • [ ] Config documentation
  • [ ] Migration documentation
• Polish:
  • [ ] PartialOrd / improved check perf
  • [ ] Single sort pass / lexicographical sort as last compare sort?
  • [ ] Better name for the rule (useSortedUtilityClasses?)
  • [ ] Avoid string allocations whenever possible.

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.

[damianobarbati]

@DaniGuardiola other few things to consider on why the tailwind config is needed and possible problems:

1. A feature needed to move away from eslint + tailwind plugin is the https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-custom-classname.md rule which gives you error if the class you specified does not exist.
2. Some classes are automatically generated depending on the tailwind config file: for instance, if you declare a color {"red":{"blood":"#F00"}}, you can have use the class fill-red-blood.
3. Some classes are inside your .css files, and those are valid.
4. In a monorepo, you can have the tailwind config inside the single package folder and not in the root monorepo folder.

Hope this helps.

[Goldziher]

Running autofix with unsafe replaces all className= with class= inside react components.

[DaniGuardiola]

@Goldziher please provide a minimal reproduction.

[BorisZubchenko]

Seems like nobody mentioned this before. Biome formats this:

<section className="[grid-area:'body'] text-center">1</section>

To this:

<section className='text-center [grid-area:'body']'>1</section>

Here, double quotes were replaced with single ones. This leads to a syntax error.

[ematipico]

@BorisZubchenko please open a bug report, this issue isn't for bug reports.

[vgseven]

add support for rules for un-supported or invalid class of tailwind, inspired by eslint-plugin-tailwind

[warrenbhw]

Is there any way to apply the unsafe fix on save?

[ematipico]

@warrenbhw this question was already asked and answered in this very issue. Please search here or on the website: https://github.com/biomejs/biome/issues/1274#issuecomment-2203887336

[lobosan]

Hi, I'm migrating my Astro project to Biome 1.8.3, and I love the simple setup, the only thing remaining for me is Tailwind class sorting.

This is my biome.json

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "css": {
    "formatter": {
      "enabled": true
    },
    "linter": {
      "enabled": true
    },
    "parser": {
      "cssModules": true
    }
  },
  "files": {
    "ignore": [".astro", "dist", "node_modules"]
  },
  "formatter": {
    "formatWithErrors": true,
    "indentStyle": "space",
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "arrowParentheses": "asNeeded"
    }
  },
  "linter": {
    "rules": {
      "nursery": {
        "useSortedClasses": "error"
      }
    }
  }
}

This is my settings.json for VSCode

{
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true
}

However, when I run npx @biomejs/biome check --unsafe

I don't see any error in my .astro file that has the invalid example of the documentation <div class="px-2 foo p-4 bar" />

Can someone please help me to fix the issue? Also, ideally I would love to sort the classes when saving.

[Trombach]

Hi, I'm migrating my Astro project to Biome 1.8.3, and I love the simple setup, the only thing remaining for me is Tailwind class sorting.

This is my biome.json

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "css": {
    "formatter": {
      "enabled": true
    },
    "linter": {
      "enabled": true
    },
    "parser": {
      "cssModules": true
    }
  },
  "files": {
    "ignore": [".astro", "dist", "node_modules"]
  },
  "formatter": {
    "formatWithErrors": true,
    "indentStyle": "space",
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "arrowParentheses": "asNeeded"
    }
  },
  "linter": {
    "rules": {
      "nursery": {
        "useSortedClasses": "error"
      }
    }
  }
}

This is my settings.json for VSCode

{
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true
}

However, when I run npx @biomejs/biome check --unsafe

I don't see any error in my .astro file that has the invalid example of the documentation <div class="px-2 foo p-4 bar" />

Can someone please help me to fix the issue? Also, ideally I would love to sort the classes when saving.

Biome can't yet parse the html template section of Astro files, so nothing gets formatted/linted in there, including class names. THis will only work once biome has full support for Astro files