useTailwindSortedClasses (HTML)

Summary

Rule available since: v2.5.0
Diagnostic Category: lint/nursery/useTailwindSortedClasses
This rule has an unsafe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- tailwind
- project

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useTailwindSortedClasses": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce the sorting of Tailwind CSS classes.

Classes are sorted in the same order as the official Tailwind CSS Prettier plugin, which is the order in which Tailwind CSS writes their CSS. Classes that Tailwind CSS doesn’t know, such as your own CSS classes, come first and keep their original order.

To make the rule aware of your own theme values, utilities, and variants, point the tailwind.stylesheet option at the CSS file that holds your Tailwind CSS configuration. Without it, the rule only knows the default configuration, and treats classes that use your own theme values, utilities, or variants like classes that Tailwind CSS doesn’t know.

Biome scans your project when this rule is enabled, so that it can read the stylesheet and the files it imports. The scan happens even if tailwind.stylesheet isn’t set, although the rule then only uses the default configuration.

Examples

Invalid

1
<div class="px-2 foo p-4 bar"></div>

code-block.html:1:12 lint/nursery/useTailwindSortedClasses  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ These CSS classes should be sorted.
  
  > 1 │ <div class="px-2 foo p-4 bar"></div>
      │            ^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ A consistent class order makes class lists easier to read and keeps changes to them small.
  
  ℹ This rule is still being actively worked on, so it may be missing features or have rough edges. Visit https://github.com/biomejs/biome/issues/9181 for more information or to report possible bugs.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Sort the classes.
  
    1   │ - <div·class="px-2·foo·p-4·bar"></div>
      1 │ + <div·class="foo·bar·p-4·px-2"></div>
    2 2 │

1
<div class="hover:focus:m-2 foo hover:px-2 p-4"></div>

code-block.html:1:12 lint/nursery/useTailwindSortedClasses  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ These CSS classes should be sorted.
  
  > 1 │ <div class="hover:focus:m-2 foo hover:px-2 p-4"></div>
      │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ A consistent class order makes class lists easier to read and keeps changes to them small.
  
  ℹ This rule is still being actively worked on, so it may be missing features or have rough edges. Visit https://github.com/biomejs/biome/issues/9181 for more information or to report possible bugs.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Sort the classes.
  
    1   │ - <div·class="hover:focus:m-2·foo·hover:px-2·p-4"></div>
      1 │ + <div·class="foo·p-4·hover:px-2·hover:focus:m-2"></div>
    2 2 │

Valid

1
<div class="bar foo p-4 px-2"></div>

Recognized class strings

This rule checks the attributes and functions recognized by the top-level tailwind configuration.