Tailwind Sorter
Automatically sort Tailwind classes on save. Use your preferred sort order to keep your classes organized.
Extension Settings
Custom sort order and categories can be configured in settings.
- Open settings
- Click the gear icon in the bottom left corner, or
- Navigate to
File > Preferences > Settings
- Search for "Tailwind Sorter" in the search bar at the top of the settings window.
- Modify the settings according to your preferences:
Tailwind Sorter: Category Order
: The order categories will be sorted.
Tailwind Sorter: Categories
: Which style classes will belong to which category and in what order.
Tailwind Sorter: Pseudo Classes Order
: How pseudo-classes should be ordered.
Tailwind Sorter: Custom Prefixes
: Prefixes that identify class strings other than the default class=
and className=
.
The default category order is: box model, grid, flexbox, background, margins and padding, borders, width and height, typography, transformations, and other`.
The default order for pseudo-classes order is: screens (sm, md, lg, xl, 2xl), before and after pseudo-elements, states (hover, focus, active, visited, disabled), dark mode, child selectors (first, last, odd, even), group states (group-over, group-focus), and motion preferences (motion-safe, motion-reduce).
Category example:
"box": [
"group",
"block",
"relative",
"top",
"right",
"bottom",
"left",
"z-",
"float",
"clear",
"box-border",
"static",
"fixed",
"absolute",
"sticky",
"inset-",
],
Custom Prefixes: Tailwind Sorter checks for class=
and className=
as well as any custom prefixes defined in settings. Default custom prefixes include: twMerge(
, cva(
, and clsx(
Sorting
The extension sorts any strings that are preceded by a prefix and do not included dynamic syntax
- Strings:
""
''
``
- Prefixes:
Custom prefixes
class=
className=
- Dynamic Syntax:
?
<
>
{
With Prettier
If you don't need control over the sort order, the prettier plugin is recommended.
- Using prettier-plugin-tailwindcss alongside Tailwind Sorter causes classes to "flash" on save.
- To prevent this, remove
prettier-plugin-tailwindcss
from plugins: []
in your prettier config file and reload window.