Skip to content

Latest commit

 

History

History
156 lines (103 loc) · 4.51 KB

multiline.md

File metadata and controls

156 lines (103 loc) · 4.51 KB
Raw

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"



  • callees

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

    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. This can also be set globally via the [settings object](../settings/settings.md.

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


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
`} />;