コンテンツにスキップ
Biome
Docs Blog Playground

useSortedClasses

このコンテンツはまだ日本語訳がありません。

Diagnostic Category: lint/nursery/useSortedClasses

Since: v1.6.0

Enforce the sorting of CSS utility classes.

This rule implements the same sorting algorithm as Tailwind CSS, but supports any utility class framework including UnoCSS.

It is analogous to prettier-plugin-tailwindcss.

Examples

Section titled Examples

Invalid

Section titled Invalid
<div class="px-2 foo p-4 bar" />;
code-block.jsx:1:12 lint/nursery/useSortedClasses  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ These CSS classes should be sorted.
  
  > 1 │ <div class=“px-2 foo p-4 bar” />;
      │            ^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ 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 │   
  
<div class="hover:focus:m-2 foo hover:px-2 p-4">
code-block.jsx:2:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ expected &lt; but instead the file ends
  
    1 │ <div class=“hover:focus:m-2 foo hover:px-2 p-4”>
  > 2 │ 
      │ 
  
  ℹ the file ends here
  
    1 │ <div class=“hover:focus:m-2 foo hover:px-2 p-4”>
  > 2 │ 
      │

Options

Section titled Options
Section titled Code-related
{
    "options": {
        "attributes": ["classList"],
        "functions": ["clsx", "cva", "tw"]
    }
}

attributes

Section titled attributes

Classes in the class and className JSX attributes are always sorted. Use this option to add more attributes that should be sorted.

functions

Section titled functions

If specified, strings in the indicated functions will be sorted. This is useful when working with libraries like clsx or cva.

clsx("px-2 foo p-4 bar", {
    "some-css-class": condition,
});
code-block.js:1:6 lint/nursery/useSortedClasses  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ These CSS classes should be sorted.
  
  > 1 │ clsx(“px-2 foo p-4 bar”, {
      │      ^^^^^^^^^^^^^^^^^^
    2 │     “some-css-class”: condition,
    3 │ });
  
  ℹ Unsafe fix: Sort the classes.
  
    1   │ - clsx(“px-2·foo·p-4·bar”,·{
      1 │ + clsx(“foo·bar·p-4·px-2”,·{
    2 2 │       “some-css-class”: condition,
    3 3 │   });
  
clsx("some-css-class", {
    "block mx-4": condition,
});
code-block.js:2:5 lint/nursery/useSortedClasses  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ These CSS classes should be sorted.
  
    1 │ clsx(“some-css-class”, {
  > 2 │     “block mx-4”: condition,
      │     ^^^^^^^^^^^^
    3 │ });
    4 │ 
  
  ℹ Unsafe fix: Sort the classes.
  
    1 1 │   clsx(“some-css-class”, {
    2   │ - ····“block·mx-4”:·condition,
      2 │ + ····“mx-4·block”:·condition,
    3 3 │   });
    4 4 │

Tagged template literals are also supported, for example:

tw`px-2`;
tw.div`px-2`;
tw`px-2 foo p-4 bar`;
code-block.js:1:4 lint/nursery/useSortedClasses  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ These CSS classes should be sorted.
  
  > 1 │ twpx-2 foo p-4 bar;
      │    ^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Sort the classes.
  
    1   │ - tw</span><span style="color: Tomato;"><strong>p</strong></span><span style="color: Tomato;"><strong>x</strong></span><span style="color: Tomato;"><strong>-</strong></span><span style="color: Tomato;"><strong>2</strong></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><strong>f</strong></span><span style="color: Tomato;"><strong>o</strong></span><span style="color: Tomato;"><strong>o</strong></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;">p</span><span style="color: Tomato;">-</span><span style="color: Tomato;">4</span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><strong>b</strong></span><span style="color: Tomato;"><strong>a</strong></span><span style="color: Tomato;"><strong>r</strong></span><span style="color: Tomato;">;
      1 │ + tw</span><span style="color: MediumSeaGreen;"><strong>f</strong></span><span style="color: MediumSeaGreen;"><strong>o</strong></span><span style="color: MediumSeaGreen;"><strong>o</strong></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><strong>b</strong></span><span style="color: MediumSeaGreen;"><strong>a</strong></span><span style="color: MediumSeaGreen;"><strong>r</strong></span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;">p</span><span style="color: MediumSeaGreen;">-</span><span style="color: MediumSeaGreen;">4</span><span style="color: MediumSeaGreen;"><span style="opacity: 0.8;">·</span></span><span style="color: MediumSeaGreen;"><strong>p</strong></span><span style="color: MediumSeaGreen;"><strong>x</strong></span><span style="color: MediumSeaGreen;"><strong>-</strong></span><span style="color: MediumSeaGreen;"><strong>2</strong></span><span style="color: MediumSeaGreen;">;
    2 2 │
Section titled Sort-related

Differences with Prettier

Section titled Differences with Prettier

The main key difference is that Tailwind CSS and its Prettier plugin read and execute the tailwind.config.js JavaScript file, which Biome can’t do. Instead, Biome implements a simpler version of the configuration. The trade-offs are explained below.

Values are not known

Section titled Values are not known

The rule has no knowledge of values such as colors, font sizes, or spacing values, which are normally defined in a configuration file like tailwind.config.js. Instead, the rule matches utilities that support values in a simpler way: if they start with a known utility prefix, such as px- or text-, they’re considered valid.

This has two implications:

  • False positives: classes can be wrongly recognized as utilities even though their values are incorrect. For example, if there’s a px- utility defined in the configuration, it will match all of the following classes: px-2, px-1337, px-[not-actually-valid], px-literally-anything.

  • No distinction between different utilities that share the same prefix: for example, text-red-500 and text-lg are both interpreted as the same type of utility by this rule, even though the former refers to a color and the latter to a font size. This results in all utilities that share the same prefix being sorted together, regardless of their actual values.

Custom additions must be specified

Section titled Custom additions must be specified

The built-in Tailwind CSS preset (enabled by default) contains the set of utilities and variants that are available with the default configuration. More utilities and variants can be added through Tailwind CSS plugins. In Biome, these need to be manually specified in the Biome configuration file in order to “extend” the preset.

Presets can’t be modified

Section titled Presets can’t be modified

In Tailwind CSS, core plugins (which provide the default utilities and variants) can be disabled. In Biome, however, there is no way to disable parts of a preset: it’s all or nothing. A work-around is to, instead of using a preset, manually specify all utilities and variants in the Biome configuration file.

Whitespace is collapsed

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

Section titled Related links