defaults.md

Defaults

Every rule can target multiple class attributes, callee names or variable names.

Read the concepts documentation first to learn why this is important and what different options there are to define where to look for tailwind classes.

The default configuration is designed to work with the most popular tailwind utilities:

• tailwind merge
• class variance authority
• tailwind variants
• shadcn
• classcat
• class list builder
• clsx
• cnbuilder
• classnames template literals
• obj str

If an utility is not supported or you have built your own, you can change the matchers in the configuration. If you want to extend the default config, you can import it from the plugin:

import {
  getDefaultCallees,
  getDefaultClassAttributes,
  getDefaultVariables
} from "eslint-plugin-readable-tailwind/api/defaults";

Extending the config

import eslintPluginReadableTailwind from "eslint-plugin-readable-tailwind";
import {
  getDefaultCallees,
  getDefaultClassAttributes,
  getDefaultVariables
} from "eslint-plugin-readable-tailwind/api/defaults";
import { MatcherType } from "eslint-plugin-readable-tailwind/api/types";


export default [
  {
    plugins: {
      "readable-tailwind": eslintPluginReadableTailwind
    },
    rules: {
      "readable-tailwind/multiline": ["warn", {
        callees: [
          ...getDefaultCallees(),
          [
            "myFunction", [
              {
                match: MatcherType.String
              }
            ]
          ]
        ]
      }],
      "readable-tailwind/no-unnecessary-whitespace": ["warn", {
        variables: [
          ...getDefaultVariables(),
          [
            "myVariable", [
              {
                match: MatcherType.String
              }
            ]
          ]
        ]
      }],
      "readable-tailwind/sort-classes": ["warn", {
        classAttributes: [
          ...getDefaultClassAttributes(),
          [
            "myAttribute", [
              {
                match: MatcherType.String
              }
            ]
          ]
        ]
      }]
    }
  }
];