useTailwindSortedClasses (JavaScript)

Summary

Rule available since: v1.6.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
Sources:
- Inspired from better-tailwindcss/enforce-consistent-class-order
- Inspired from tailwindcss/classnames-order

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.

Important notes

This rule is a work in progress. Progress is being tracked in the following GitHub issue: https://github.com/biomejs/biome/issues/1274

Class sorting is not part of the formatter. It’s a lint rule with a fix that is classified as unsafe, which means that it won’t be applied automatically as part of IDE actions such as “fix on save”.

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" />;

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

  ℹ These CSS classes should be sorted.
  
  > 1 │ <div class="px-2 foo p-4 bar" />;
      │            ^^^^^^^^^^^^^^^^^^
    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/1274 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"·/>;
      1 │ + <div·class="foo·bar·p-4·px-2"·/>;
    2 2 │

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

code-block.jsx: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" />
      │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    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/1274 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"·/>
      1 │ + <div·class="foo·p-4·hover:px-2·hover:focus:m-2"·/>
    2 2 │

Valid

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

Recognized class strings

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

Differences with Prettier

Whitespace is collapsed

The Tailwind CSS Prettier plugin preserves all original whitespace. This rule, however, collapses all whitespace (including newlines) into single spaces.

This is a deliberate decision. We’re unsure about this behavior, and would appreciate feedback on it. If this is a problem for you, please share a detailed explanation of your use case in the GitHub issue.