no-duplicate-classes.md

readable-tailwind/no-duplicate-classes

Disallow duplicate classes in tailwindcss class strings.

Options

• 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: duplicate classes
<div class="rounded underline rounded" />;

// ✅ GOOD: no duplicate classes
<div class="rounded underline" />;

Note

This rule is smart. It is able to detect duplicates across template literal boundaries.

// ❌ BAD: duplicate classes in conditional template literal classes and around template elements
<div class={`
  underline italic
  ${someCondition === true ? "rounded  underline font-bold" : "rounded underline font-thin"}
  italic
`} />;

// ✅ GOOD: no duplicate classes
<div class={`
  underline italic
  ${someCondition === true ? "rounded  font-bold" : "rounded font-thin"}
`} />;