eslint-plugin-readable-tailwind v1.3.2

ESLint plugin to automatically break up long tailwind class strings into multiple lines for better readability. Also sorts the classes logically, removes unnecessary whitespaces and groups the classes by their modifiers. It works in jsx and html.

Installation

npm install eslint-plugin-readable-tailwind --save-dev

Usage

Flat config

Add readable-tailwind to your flat eslint config:

import eslintPluginReadableTailwind from "eslint-plugin-readable-tailwind";

export default [
  {
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true
        }
      }
    },
    plugins: {
      "readable-tailwind": eslintPluginReadableTailwind
    },
    rules: {
      // enable all recommended rules to warn
      ...eslintPluginReadableTailwind.configs.warning,
      // enable all recommended rules to error
      ...eslintPluginReadableTailwind.configs.error,

      // or configure rules individually
      "readable-tailwind/multiline": ["warn", { printWidth: 100 }]
    }
  }
];

VSCode

To enable the new flat config format in VSCode, add the following to your .vscode/settings.json:

{
  "eslint.experimental.useFlatConfig": true
}

Legacy config

Add readable-tailwind to your eslint config:

{
  "extends": [
    // enable all recommended rules to warn
    "plugin:readable-tailwind/warning",
    // enable all recommended rules to error
    "plugin:readable-tailwind/error"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest"
  },
  "plugins": ["readable-tailwind"],
  "rules": {
    // or configure rules individually
    "readable-tailwind/multiline": ["warn", { "printWidth": 100 }]
  }
}

Rules

💼 Configurations enabled in.\ ⚠️ Configurations set to warn in.\ Set in the error configuration.\ Set in the warning configuration.\ 🔧 Automatically fixable by the --fix CLI option.

Name	Description	💼	⚠️	🔧
multiline	Enforce consistent line wrapping for tailwind classes.			🔧
no-unnecessary-whitespace	Disallow unnecessary whitespace in tailwind classes.			🔧
sort-classes	Enforce a consistent order for tailwind classes.			🔧