Skip to content
Biome 中文网
开发文档 当前版本 v1.9

useSortedClasses

诊断类别：lint/nursery/useSortedClasses

¥Diagnostic Category: lint/nursery/useSortedClasses

自从：v1.6.0

¥Since: v1.6.0

强制对 CSS 实用程序类进行排序。

¥Enforce the sorting of CSS utility classes.

此规则实现与 Tailwind CSS 相同的排序算法，但支持任何实用程序类框架，包括 UnoCSS。

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

它类似于 prettier-plugin-tailwindcss。

¥It is analogous to prettier-plugin-tailwindcss.

示例

Section titled 示例

¥Examples

无效

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

选项

Section titled 选项

¥Options

代码相关

Section titled 代码相关

¥Code-related

{
    "options": {
        "attributes": ["classList"],
        "functions": ["clsx", "cva", "tw"]
    }
}

attributes

Section titled attributes

类属性和方法名称在 class 中。使用此选项添加更多应排序的属性。

¥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

如果指定，则将对指示函数中的字符串进行排序。这在使用 clsx 或 cva 等库时很有用。

¥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", {
    "block mx-4": condition,
});

还支持标记模板文字，例如：

¥Tagged template literals are also supported, for example:

tw`px-2`;
tw.div`px-2`;

排序相关

Section titled 排序相关

¥Sort-related

与 Prettier 的区别

Section titled 与 Prettier 的区别

¥Differences with Prettier

主要的关键区别在于 Tailwind CSS 及其 Prettier 插件读取并执行 tailwind.config.js JavaScript 文件，而 Biome 无法做到这一点。相反，Biome 实现了更简单的配置版本。权衡如下。

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

值未知

Section titled 值未知

¥Values are not known

该规则不了解颜色、字体大小或间距值等值，这些值通常在配置文件（如 tailwind.config.js）中定义。相反，规则以更简单的方式匹配支持值的实用程序：如果它们以已知的实用程序前缀开头，例如 px- 或 text-，则它们被视为有效。

¥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:

  • 误报：即使类的值不正确，也可能被错误地识别为实用程序。例如，如果配置中定义了 px- 实用程序，它将匹配以下所有类：px-2, px-1337, px-[not-actually-valid], px-literally-anything.

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

  • 共享相同前缀的不同实用程序之间没有区别：例如，根据此规则，text-red-500 和 text-lg 都被解释为相同类型的实用程序，即使前者指的是颜色，后者指的是字体大小。这导致所有共享相同前缀的实用程序被一起排序，而不管它们的实际值如何。

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

必须指定自定义添加

Section titled 必须指定自定义添加

¥Custom additions must be specified

内置的 Tailwind CSS 预设（默认启用）包含默认配置可用的实用程序和变体集。可以通过 Tailwind CSS 插件添加更多实用程序和变体。在 Biome 中，需要在 Biome 配置文件中手动指定这些节点才能 “extend” 预设。

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

无法修改预设

Section titled 无法修改预设

¥Presets can’t be modified

在 Tailwind CSS 中，可以禁用核心插件（提供默认实用程序和变体）。然而，在 Biome 中，没有办法禁用预设的某些部分：要么全部，要么全部。一种解决方法是，不使用预设，而是在 Biome 配置文件中手动指定所有实用程序和变体。

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

空白已折叠

Section titled 空白已折叠

¥Whitespace is collapsed

Tailwind CSS Prettier 插件保留所有原始空格。但是，此规则将所有空格（包括换行符）折叠为单个空格。

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

这是一个深思熟虑的决定。我们不确定这种行为，并希望得到反馈。如果这对你来说是个问题，请在 GitHub 问题 中分享你的用例的详细说明。

¥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