useSortedClasses (HTML)
Summary
Section titled “Summary”- Rule available since:
v2.5.0 - Diagnostic Category:
lint/nursery/useSortedClasses - This rule has an unsafe fix.
- The default severity of this rule is information.
How to configure
Section titled “How to configure”{ "linter": { "rules": { "nursery": { "useSortedClasses": "error" } } }}Description
Section titled “Description”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"></div>code-block.html:1:12 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ These CSS classes should be sorted.
> 1 │ <div class="px-2 foo p-4 bar"></div>
│ ^^^^^^^^^^^^^^^^^^
2 │
ℹ 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 │
<div class="hover:focus:m-2 foo hover:px-2 p-4"></div>code-block.html:1:12 lint/nursery/useSortedClasses FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ These CSS classes should be sorted.
> 1 │ <div class="hover:focus:m-2 foo hover:px-2 p-4"></div>
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ 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 │
<div class="bar foo p-4 px-2"></div>Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.