sort-classes.md

readable-tailwind/sort-classes

Enforce the order of tailwind classes. It is possible to sort classes alphabetically or logically.

Warning

If you also use eslint-plugin-tailwindcss you should disable the rule eslint-plugin-tailwindcss/classnames-order, and use this rule instead. Otherwise, the two rules may conflict with each other.

Options

• order

  • asc: Sort classes alphabetically in ascending order.
  • desc: Sort classes alphabetically in descending order.
  • official: Sort classes according to the official sorting order from tailwindcss.
  • improved: Same as official but also sorts by data-attributes.

  Type: "asc" | "desc" | "official" | "improved"
  Default: "improved"

• tailwindConfig

  The path to the tailwind config file. If not specified, the plugin will try to find it automatically or falls back to the default configuration.
  The tailwind config is used to determine the sorting order.

  Type: string
  Default: undefined

• classAttributes

  The name of the attribute that contains the tailwind classes. This can also be set globally via the settings object.

  Type: Array of Name, Regex or Matchers
  Default: Name for "class" and strings Matcher for "class", "className"

• callees

  List of function names which arguments should also get linted. This can also be set globally via the settings object.

  Type: Array of Name, Regex or Matchers
  Default: Matchers for "cc", "clb", "clsx", "cn", "cnb", "ctl", "cva", "cx", "dcnb", "objstr", "tv", "twJoin", "twMerge"

• variables

  List of variable names whose initializer should also get linted. This can also be set globally via the settings object.

  Type: Array of Name, Regex or Matchers
  Default: strings Matcher for "className", "classNames", "classes", "style", "styles"

• tags

  List of template literal tag names whose content should get linted. This can also be set globally via the settings object.

  Type: Array of Name, Regex or Matchers
  Default: None

  Note: When using the tags option, it is recommended to use the strings Matcher for your tag names. This will ensure that nested expressions get linted correctly.

Examples

// ❌ BAD: all classes are in random order
<div class="underline hover:text-opacity-70 focus:font-bold text-black hover:font-bold focus:text-opacity-70"/>;

// ✅ GOOD: with option { order: 'asc' }
<div class="focus:font-bold focus:text-opacity-70 hover:font-bold hover:text-opacity-70 text-black underline"/>;

// ✅ GOOD: with option { order: 'desc' }
<div class="underline text-black hover:text-opacity-70 hover:font-bold focus:text-opacity-70 focus:font-bold"/>;

// ✅ GOOD: with option { order: 'official' }
<div class="text-black underline hover:font-bold hover:text-opacity-70 focus:font-bold focus:text-opacity-70"/>;

// ✅ GOOD: with option { order: 'improved' }
<div class="text-black underline focus:font-bold focus:text-opacity-70 hover:font-bold hover:text-opacity-70"/>;