### Plugin configuration example

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/migration-from-tailwind-2.md

Example of the plugin configuration in a .eslintrc.js file.

```js
...
"tailwindcss/migration-from-tailwind-2": [<enabled>, {
  "callees": Array<string>,
  "config": <string>|<object>,
  "skipClassAttribute": <boolean>,
  "tags": Array<string>,
}]
...
```

--------------------------------

### Correct code examples

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/enforces-negative-arbitrary-values.md

Examples of correct code for the enforces-negative-arbitrary-values rule.

```html
<div
  class="top-[10px] right-[var(--my-var)*-1] left-[-5px] right-[var(--my-var)]"
>
  Negative arbitrary values
</div>
```

--------------------------------

### Install beta version for Tailwind CSS v4 support

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/README.md

Install the beta version of the plugin to get partial support for Tailwind CSS v4.

```bash
npm i eslint-plugin-tailwindcss@beta -D
```

--------------------------------

### Install ESLint and eslint-plugin-tailwindcss

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/README.md

Install ESLint and the Tailwind CSS ESLint plugin using npm.

```bash
$ npm i -D eslint eslint-plugin-tailwindcss

```

--------------------------------

### Correct code example

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/enforces-shorthand.md

Examples of correct code for this rule.

```html
<div class="border-4">border shorthand</div>
```

--------------------------------

### Correct code example

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/classnames-order.md

Examples of correct code for the classnames-order rule.

```html
<div class="m-4 flex h-24 border-2 border-gray-300 p-3 lg:m-4 lg:p-4"></div>
```

--------------------------------

### Incorrect code examples

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/enforces-negative-arbitrary-values.md

Examples of incorrect code for the enforces-negative-arbitrary-values rule.

```html
<div
  class="-top-[-10px] -right-[var(--my-var)] -left-[5px] -right-[var(--my-var)*-1]"
>
  Negative arbitrary values
</div>
```

--------------------------------

### Incorrect code example

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/classnames-order.md

Examples of incorrect code for the classnames-order rule.

```html
<div class="p-3 border-gray-300 m-4 h-24 lg:p-4 flex border-2 lg:m-4"></div>
```

--------------------------------

### Correct code example

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-arbitrary-value.md

Examples of correct code for the no-arbitrary-value rule.

```html
<div class="border-4">border width</div>
```

--------------------------------

### Incorrect code example

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/enforces-shorthand.md

Examples of incorrect code for this rule.

```html
<div class="border-t-4 border-r-4 border-b-4 border-l-4">border shorthand</div>
```

--------------------------------

### npm scripts for ESLint

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/README.md

Example npm scripts to run ESLint tasks.

```json5
"scripts": {
  "lint": "eslint ./src",
  "lint:debug": "eslint ./src --debug",
  "lint:fix": "eslint ./src --fix"
},
```

--------------------------------

### Correct code example

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-contradicting-classname.md

Examples of correct code for this rule.

```html
<div class="container p-1 lg:p-4">padding is defined once per variant max.</div>
```

--------------------------------

### Incorrect code example

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-arbitrary-value.md

Examples of incorrect code for the no-arbitrary-value rule.

```html
<div class="border-[4px]">border width</div>
```

--------------------------------

### ESLint Configuration for eslint.config.js

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/README.md

Example configuration for eslint-plugin-tailwindcss using the flat config format.

```js
import tailwind from "eslint-plugin-tailwindcss";

export default [
  ...tailwind.configs["flat/recommended"],
  {
    settings: {
      tailwindcss: {
        // These are the default values but feel free to customize
        callees: ["classnames", "clsx", "ctl"],
        config: "tailwind.config.js", // returned from `loadConfig()` utility if not provided
        cssFiles: [
          "**/*.css",
          "!**/node_modules",
          "!**/.*",
          "!**/dist",
          "!**/build",
        ],
        cssFilesRefreshRate: 5_000,
        removeDuplicates: true,
        skipClassAttribute: false,
        whitelist: [],
        tags: [], // can be set to e.g. ['tw'] for use in tw`bg-blue`
        classRegex: "^class(Name)?$", // can be modified to support custom attributes. E.g. "^tw$" for `twin.macro`
      },
    },
  },
];
```

--------------------------------

### Correct code example

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-custom-classname.md

Examples of correct code for the no-custom-classname rule, using only Tailwind CSS classnames.

```html
<div class="container box-content lg:box-border">
  Only Tailwind CSS classnames
</div>
```

--------------------------------

### Allow custom classnames while checking for `text-` and `bg-`

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-custom-classname.md

This example demonstrates how to use a negative lookahead expression to allow custom classnames while ensuring that classnames starting with `bg-` or `text-` are valid Tailwind CSS classnames.

```javascript
[
  // white list any classname which does NOT start with `bg-` and `text-`
  "(?!(bg|text)\-).*"
]
```

--------------------------------

### Examples of correct code with 0 based value

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-unnecessary-arbitrary-value.md

Examples of correct code with 0 based value for the no-unnecessary-arbitrary-value rule.

```html
<div class="h-0">Use `h-0` (`0px`) instead</div>
```

--------------------------------

### Examples of correct code for this rule

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-unnecessary-arbitrary-value.md

Examples of correct code for the no-unnecessary-arbitrary-value rule.

```html
<div class="h-auto">height</div>
```

--------------------------------

### Examples of correct code for negative arbitrary values

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-unnecessary-arbitrary-value.md

Examples of correct code for negative arbitrary values for the no-unnecessary-arbitrary-value rule.

```html
<div class="-m-5 z-10">[Double] negative values</div>
```

--------------------------------

### Incorrect code example

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-contradicting-classname.md

Examples of incorrect code for this rule.

```html
<div class="container w-1 w-2">which is the correct width ?</div>
```

--------------------------------

### Incorrect code example

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-custom-classname.md

Examples of incorrect code for the no-custom-classname rule, where custom classnames are used.

```html
<div class="w-12 my-custom">my-custom is not defined in Tailwind CSS!</div>
```

--------------------------------

### Configure HTML/Blade parser for .eslintrc

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/README.md

Example of configuring the HTML/Blade parser for .html and .blade.php files in .eslintrc.

```json5
overrides: [
  {
    files: ['*.html', '*.blade.php'],
    parser: '@angular-eslint/template-parser',
  },
],
```

--------------------------------

### Examples of incorrect code with 0 based value

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-unnecessary-arbitrary-value.md

Examples of incorrect code with 0 based value for the no-unnecessary-arbitrary-value rule.

```html
<div class="h-[0%]">Use `h-0` (`0px`) instead</div>
```

--------------------------------

### Examples of incorrect code for this rule

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-unnecessary-arbitrary-value.md

Examples of incorrect code for the no-unnecessary-arbitrary-value rule.

```html
<div class="h-[auto]">height</div>
```

--------------------------------

### Examples of incorrect code for negative arbitrary values

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-unnecessary-arbitrary-value.md

Examples of incorrect code for negative arbitrary values for the no-unnecessary-arbitrary-value rule.

```html
<div class="m-[-1.25rem] -z-[-10]">[Double] negative values</div>
```

--------------------------------

### Configure Vue.js parser for .eslintrc

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/README.md

Example of configuring the Vue.js parser for .vue files in .eslintrc.

```json5
overrides: [
  {
    files: ['*.vue'],
    parser: 'vue-eslint-parser',
  },
],
```

--------------------------------

### Renamed classnames - Correct code

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/migration-from-tailwind-2.md

Examples of correct code for the renamed classnames rule.

```html
<div class="text-clip text-ellipsis">overflow-clip/ellipsis</div>
```

--------------------------------

### Removed bg-opacity - Correct code

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/migration-from-tailwind-2.md

Examples of correct code for the removed bg-opacity rule.

```html
<div class="bg-black/50">bg-opacity</div>
```

--------------------------------

### Obsolete classnames - Correct code

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/migration-from-tailwind-2.md

Examples of correct code for the obsolete classnames rule.

```html
<div class="scale-50 grayscale backdrop-blur-sm">
  Automatic transforms and filters
</div>
```

--------------------------------

### Configure TypeScript parser for .eslintrc

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/README.md

Example of configuring the TypeScript parser for .js, .jsx, .ts, and .tsx files in .eslintrc.

```json5
overrides: [
  {
    files: ['*.ts', '*.tsx', '*.js'],
    parser: '@typescript-eslint/parser',
  },
],
```

--------------------------------

### Removed bg-opacity - Incorrect code

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/migration-from-tailwind-2.md

Examples of incorrect code for the removed bg-opacity rule.

```html
<div class="bg-opacity-50 bg-black">bg-opacity</div>
```

--------------------------------

### Obsolete classnames - Incorrect code

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/migration-from-tailwind-2.md

Examples of incorrect code for the obsolete classnames rule.

```html
<div
  class="transform scale-50 filter grayscale backdrop-filter backdrop-blur-sm"
>
  Automatic transforms and filters
</div>
```

--------------------------------

### Renamed classnames - Incorrect code

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/migration-from-tailwind-2.md

Examples of incorrect code for the renamed classnames rule.

```html
<div class="overflow-clip overflow-ellipsis">overflow-clip/ellipsis</div>
```

--------------------------------

### Enable Corepack

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/CONTRIBUTING.md

Ensures consistent package manager usage by enabling Corepack.

```bash
corepack enabled
```

--------------------------------

### Rule options

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/classnames-order.md

Configuration options for the tailwindcss/classnames-order ESLint rule.

```javascript
...\n"tailwindcss/classnames-order": [<enabled>, {\n  "callees": Array<string>,\n  "config": <string>|<object>,\n  "removeDuplicates": <boolean>,\n  "skipClassAttribute": <boolean>,\n  "tags": Array<string>,\n}]\n...
```

--------------------------------

### Rule options configuration

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-custom-classname.md

Configuration options for the tailwindcss/no-custom-classname ESLint rule.

```javascript
...
"tailwindcss/no-custom-classname": [<enabled>, {
  "callees": Array<string>,
  "config": <string>|<object>,
  "cssFiles": Array<string>,
  "cssFilesRefreshRate": <number>,
  "skipClassAttribute": <boolean>,
  "tags": Array<string>,
  "whitelist": Array<string>,
}]
...
```

--------------------------------

### ESLint Configuration for .eslintrc

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/README.md

Default settings for eslint-plugin-tailwindcss in .eslintrc format.

```json5
{
  settings: {
    tailwindcss: {
      // These are the default values but feel free to customize
      callees: ["classnames", "clsx", "ctl"],
      config: "tailwind.config.js", // returned from `loadConfig()` utility if not provided
      cssFiles: [
        "**/*.css",
        "!**/node_modules",
        "!**/.*",
        "!**/dist",
        "!**/build",
      ],
      cssFilesRefreshRate: 5_000,
      removeDuplicates: true,
      skipClassAttribute: false,
      whitelist: [],
      tags: [], // can be set to e.g. ['tw'] for use in tw`bg-blue`
      classRegex: "^class(Name)?$", // can be modified to support custom attributes. E.g. "^tw$" for `twin.macro`
    },
  },
}
```

--------------------------------

### Options

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/enforces-shorthand.md

Configuration options for the enforces-shorthand rule.

```javascript
...\n"tailwindcss/enforces-shorthand": [<enabled>, {\n  "callees": Array<string>,\n  "config": <string>|<object>,\n  "skipClassAttribute": <boolean>,\n  "tags": Array<string>,\n}]\n...
```

--------------------------------

### ESLint Configuration for .eslintrc

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/README.md

Configuration for ESLint versions prior to v9 using .eslintrc file.

```javascript
module.exports = {
  root: true,
  extends: ["plugin:tailwindcss/recommended"],
};
```

--------------------------------

### Configure ESLint parsers for eslint.config.js (Vue.js)

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/README.md

Configuration for Vue.js files using eslint.config.js.

```javascript
import vue from "eslint-plugin-vue";
import tailwind from "eslint-plugin-tailwindcss";

export default [
  // add `eslint-plugin-vue` flat config simply
  // if you would like use more another configuration,
  // see the section: https://eslint.vuejs.org/user-guide/#bundle-configurations-eslint-config-js
  ...vue.configs["flat/recommended"],
  ...tailwind.configs["flat/recommended"],
];
```

--------------------------------

### Rule options

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/enforces-negative-arbitrary-values.md

Configuration options for the enforces-negative-arbitrary-values rule.

```javascript
...
"tailwindcss/enforces-negative-arbitrary-values": [<enabled>, {
  "callees": Array<string>,
  "config": <string>|<object>,
  "skipClassAttribute": <boolean>,
  "tags": Array<string>,
}]
...
```

--------------------------------

### ESLint Configuration for eslint.config.js (ESLint v9+)

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/README.md

Configuration for ESLint v9+ using eslint.config.js file.

```javascript
import tailwind from "eslint-plugin-tailwindcss";

export default [...tailwind.configs["flat/recommended"]];
```

--------------------------------

### Configure ESLint parsers for eslint.config.js (JS/TS)

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/README.md

Configuration for JavaScript and TypeScript files using eslint.config.js.

```javascript
import js from "@eslint/js";
import ts from "typescript-eslint";
import tailwind from "eslint-plugin-tailwindcss";

export default [
  // add eslint built-in
  js.configs.recommended,
  // add `typescript-eslint` flat config simply
  // if you would like use more another configuration,
  // see the section: https://typescript-eslint.io/getting-started#details
  ...ts.configs.recommended,
  ...tailwind.configs["flat/recommended"],
];
```

--------------------------------

### Options for no-unnecessary-arbitrary-value rule

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-unnecessary-arbitrary-value.md

Configuration options for the no-unnecessary-arbitrary-value ESLint rule.

```javascript
...
"tailwindcss/no-unnecessary-arbitrary-value": [<enabled>, {
  "callees": Array<string>,
  "config": <string>|<object>,
  "skipClassAttribute": <boolean>,
  "tags": Array<string>,
}]
...
```

--------------------------------

### Limitations - Mixed classnames

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/enforces-shorthand.md

The rule will not merge mixed classnames (e.g. using regular values AND arbitrary values).

```html
<div class="border-t-[0] border-r-0 border-b-0 border-l-[0]">
  won't be converted to border-0 shorthand
</div>
```

--------------------------------

### Rule options

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-arbitrary-value.md

Configuration options for the tailwindcss/no-arbitrary-value rule.

```javascript
...
"tailwindcss/no-arbitrary-value": [<enabled>, {
  "callees": Array<string>,
  "config": <string>|<object>,
  "skipClassAttribute": <boolean>,
  "tags": Array<string>,
}]
...
```

--------------------------------

### Options for no-contradicting-classname

Source: https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-contradicting-classname.md

Configuration options for the no-contradicting-classname rule.

```javascript
...
"tailwindcss/no-contradicting-classname": [<enabled>, {
  "callees": Array<string>,
  "config": <string>|<object>,
  "skipClassAttribute": <boolean>,
  "tags": Array<string>,
}]
...
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.