Skip to content

Latest commit

 

History

History
86 lines (56 loc) · 3.22 KB

sort-classes.md

File metadata and controls

86 lines (56 loc) · 3.22 KB
Raw

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.

    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.

    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 which initializer should also get linted.

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


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"/>;