multiline.md

readable-tailwind/multiline

Enforce tailwind classes to be broken up into multiple lines. It is possible to break at a certain print width or a certain number of classes per line.

Options

• printWidth

  The maximum line length. Lines are wrapped appropriately to stay within this limit. The value 0 disables line wrapping by printWidth.

  Type: number
  Default: 80

• classesPerLine

  The maximum amount of classes per line. Lines are wrapped appropriately to stay within this limit . The value 0 disables line wrapping by classesPerLine.

  Type: number
  Default: 0

• group

  Defines how different groups of classes should be separated. A group is a set of classes that share the same modifier/variant.

  Type: "emptyLine" | "never" | "newLine"
  Default: "emptyLine"

• preferSingleLine

  Prefer a single line for different modifiers/variants. When set to true, the rule will keep all modifiers/variants on a single line until the line exceeds the printWidth or classesPerLine limit.

  Type: boolean
  Default: false

• indent

  Determines how the code should be indented. A number defines the amount of space characters, and the string "tab" will use a single tab character.

  Type: number | "tab"
  Default: 2

• lineBreakStyle

  The line break style.
  The style windows will use \r\n as line breaks and unix will use \n.

  Type: "windows" | "unix"
  Default: "unix"

• 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 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 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

With the default options, a class name will be broken up into multiple lines and grouped by their modifiers. Groups are separated by an empty line.

The following examples show how the rule behaves with different options:

// ❌ BAD
<div class="text-black underline focus:font-bold focus:text-opacity-70 hover:font-bold hover:text-opacity-70" />;

// ✅ GOOD: with option { group: 'emptyLine' }
<div class={`
  text-black underline

  focus:font-bold focus:text-opacity-70

  hover:font-bold hover:text-opacity-70
`} />;

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

// ✅ GOOD: with option { group: 'never', printWidth: 80 }
<div class={`
  text-black underline focus:font-bold focus:text-opacity-70 hover:font-bold
  hover:text-opacity-70
`} />;

// ✅ GOOD: with { classesPerLine: 1, group: 'emptyLine' }
<div class={`
  text-black
  underline

  focus:font-bold
  focus:text-opacity-70

  hover:font-bold
  hover:text-opacity-70
`} />;

// ✅ GOOD: with { group: "newLine", preferSingleLine: true, printWidth: 120 }
<div class="text-black underline focus:font-bold focus:text-opacity-70 hover:font-bold hover:text-opacity-70" />;

// ✅ GOOD: with { group: "newLine", preferSingleLine: true, printWidth: 80 }
<div class={`
  text-black underline
  focus:font-bold focus:text-opacity-70
  hover:font-bold hover:text-opacity-70
`} />;