no-unnecessary-whitespace.md

readable-tailwind/no-unnecessary-whitespace

Disallow unnecessary whitespace in between and around tailwind classes.

Options

• allowMultiline

  Allow multi-line class declarations.
  If this option is disabled, template literal strings will be collapsed into a single line string wherever possible. Must be set to true when used in combination with readable-tailwind/multiline.

  Type: boolean
  Default: true

• 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: random unnecessary whitespace
<div class=" text-black    underline  hover:text-opacity-70   " />;

// ✅ GOOD: only necessary whitespace is remaining
<div class="text-black underline hover:text-opacity-70"/>;