Automatically sort Tailwind classes on save or command. Use your preferred sort order to keep your classes organized.

Extension Settings

Custom sort order and categories can be configured in settings

1. Open settings:
   • Click the gear icon in the bottom left, or
   • Go to File > Preferences > Settings
2. Search for Tailwind Sorter
3. Modify the settings according to your preferences:

• Sort on Save: Whether or not classes should be sorted on save.
• Custom Prefixes: Prefixes that identify class strings other than the default class= and className=.
• Section Order: The order class, pseudo class, and non-Tailwind class sections will be placed after sorting. (Pre-release)
• Category Order: The order class categories will be sorted.
• Categories: Which classes will belong to which category.
• Pseudo Classes Order: The order pseudo-classes will be sorted.
• Include Languages: Language identifiers to add to the list of supported languages. May not sort as expected.
• Exclude Languages: Language identifiers to remove from the list of supported languages. Files with these language identifiers will not be sorted. (Pre-release)
• Ignore Paths: File paths to ignore. File names matching these glob patterns will not be sorted. (Pre-release)
• Use Official Sort: Use the official TailwindCSS Prettier plugin sort order. Overrides all other sort settings. (Pre-release, Experimental)

Settings marked (Pre-release) are only available in the pre-release version. To access: go to the extensions tab, find Tailwind Sorter, click the gear icon, and select "Install Another Version" > "Pre-release"

The default category order is: box model, grid, flex box, 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-",
    ],

The default section order is: classes (bg, text, etc.) then custom classes (non-Tailwind). By default, pseudo classes (hover:, sm:, etc.) are included in the classes section unless specified otherwise.

• default: bg-white, text-pink-500, md:text-black, customCSSclass
• pseudo classes first: md:text-black, bg-white, text-pink-500, customCSSclass

Custom Prefixes: Tailwind Sorter checks for class= and className= as well as any custom prefixes defined in settings. Default custom prefixes include: twMerge(, cva(, clsx(, and cn(

Command

Tailwind Sorter: Sort: Sort Tailwind classes in the current file.

Sorting

The extension sorts:

Any string that is preceded by a prefix and does not include dynamic syntax

• Strings: "" '' ``
• Prefixes: Custom prefixes class= className=
• Dynamic Syntax: ? < {

Single line @apply rules ending with a semicolon that do not include dynamic syntax (@ / {)

Language Support

Currently, Tailwind Sorter supports .html, .jsx, .tsx, .ejs, .mdx, .ex, .heex, .twig, django-html, .svelte, .vue, .php, .blade.php, .rb, .erb, liquid, .rs, .cshtml, .css, .scss, and .astro files. If you would like to see support for an additional language, please open an issue (or submit a PR).

Alternatively, you can add additional language identifiers to the Include Languages list in settings. Note that sorting may not work as expected

With Prettier

Experimental please report any issues

You can override the extensions native sorting by turning on the Use Official Sort setting, which loads the TailwindCSS Prettier plugin sort order.

If you use prettier, the prettier plugin is recommended.

• Using prettier-plugin-tailwindcss alongside Tailwind Sorter causes classes to "flash" on save.
• To prevent this, disable this extension or remove prettier-plugin-tailwindcss from plugins: [] in your prettier config file and reload window.