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.

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.

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