{"id":28793832,"url":"https://github.com/schoero/eslint-plugin-better-tailwindcss","last_synced_at":"2026-02-26T10:56:05.303Z","repository":{"id":211784333,"uuid":"729058610","full_name":"schoero/eslint-plugin-better-tailwindcss","owner":"schoero","description":"ESLint plugin to help you write better tailwindcss by improving readability with formatting rules and enforcing best practices with linting rules.","archived":false,"fork":false,"pushed_at":"2026-02-24T08:07:40.000Z","size":55986,"stargazers_count":697,"open_issues_count":17,"forks_count":25,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-24T12:04:52.564Z","etag":null,"topics":["auto-wrap","eslint-plugin","line-break","multiline","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/schoero.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":"FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["schoero"]}},"created_at":"2023-12-08T10:09:11.000Z","updated_at":"2026-02-24T09:18:35.000Z","dependencies_parsed_at":"2023-12-18T22:52:46.082Z","dependency_job_id":"a7b73393-b01f-4e92-a6d6-64b1d6bb3c5f","html_url":"https://github.com/schoero/eslint-plugin-better-tailwindcss","commit_stats":{"total_commits":313,"total_committers":2,"mean_commits":156.5,"dds":"0.0031948881789137795","last_synced_commit":"316793f7167845729f252ccdafab1fa463ed7bda"},"previous_names":["schoero/eslint-plugin-readable-tailwind","schoero/eslint-plugin-better-tailwindcss"],"tags_count":96,"template":false,"template_full_name":null,"purl":"pkg:github/schoero/eslint-plugin-better-tailwindcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schoero%2Feslint-plugin-better-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schoero%2Feslint-plugin-better-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schoero%2Feslint-plugin-better-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schoero%2Feslint-plugin-better-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/schoero","download_url":"https://codeload.github.com/schoero/eslint-plugin-better-tailwindcss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schoero%2Feslint-plugin-better-tailwindcss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29856768,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T08:51:08.701Z","status":"ssl_error","status_checked_at":"2026-02-26T08:50:19.607Z","response_time":89,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auto-wrap","eslint-plugin","line-break","multiline","tailwindcss"],"created_at":"2025-06-18T02:02:09.193Z","updated_at":"2026-02-26T10:56:04.439Z","avatar_url":"https://github.com/schoero.png","language":"TypeScript","funding_links":["https://github.com/sponsors/schoero","https://buymeacoffee.com/schoero"],"categories":["Plugins","TypeScript"],"sub_categories":["Libraries"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./assets/eslint-plugin-better-tailwindcss-logo-dark.svg\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"./assets/eslint-plugin-better-tailwindcss-logo-light.svg\"\u003e\n    \u003cimg alt=\"eslint-plugin-better-tailwindcss logo\" src=\"./assets/eslint-plugin-better-tailwindcss-logo.svg\"\u003e\n  \u003c/picture\u003e\n\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003eeslint-plugin-better-tailwindcss\u003c/h1\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca alt=\"GitHub license\" href=\"https://github.com/schoero/eslint-plugin-better-tailwindcss/blob/main/LICENSE\"\u003e\u003cpicture\u003e\u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/github/license/schoero/eslint-plugin-better-tailwindcss?style=flat-square\u0026labelColor=32363B\u0026color=ffffff\" /\u003e\u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://img.shields.io/github/license/schoero/eslint-plugin-better-tailwindcss?style=flat-square\u0026labelColor=EBEEF2\u0026color=000000\" /\u003e\u003cimg alt=\"eslint-plugin-better-tailwindcss logo\" src=\"https://img.shields.io/github/license/schoero/eslint-plugin-better-tailwindcss?style=flat-square\u0026labelColor=EBEEF2\u0026color=000000\" /\u003e\u003c/picture\u003e\u003c/a\u003e\n  \u003ca alt=\"npm version\" href=\"https://www.npmjs.com/package/eslint-plugin-better-tailwindcss?activeTab=versions\"\u003e\u003cpicture\u003e\u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/npm/v/eslint-plugin-better-tailwindcss?style=flat-square\u0026labelColor=32363B\u0026color=ffffff\" /\u003e\u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://img.shields.io/npm/v/eslint-plugin-better-tailwindcss?style=flat-square\u0026labelColor=EBEEF2\u0026color=000000\" /\u003e\u003cimg alt=\"eslint-plugin-better-tailwindcss logo\" src=\"https://img.shields.io/npm/v/eslint-plugin-better-tailwindcss?style=flat-square\u0026labelColor=EBEEF2\u0026color=000000\" /\u003e\u003c/picture\u003e\u003c/a\u003e\n  \u003ca alt=\"GitHub issues\" href=\"https://github.com/schoero/eslint-plugin-better-tailwindcss/issues\"\u003e\u003cpicture\u003e\u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/github/issues/schoero/eslint-plugin-better-tailwindcss?style=flat-square\u0026labelColor=32363B\u0026color=ffffff\" /\u003e\u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://img.shields.io/github/issues/schoero/eslint-plugin-better-tailwindcss?style=flat-square\u0026labelColor=EBEEF2\u0026color=000000\" /\u003e\u003cimg alt=\"eslint-plugin-better-tailwindcss logo\" src=\"https://img.shields.io/github/issues/schoero/eslint-plugin-better-tailwindcss?style=flat-square\u0026labelColor=EBEEF2\u0026color=000000\" /\u003e\u003c/picture\u003e\u003c/a\u003e\n  \u003ca alt=\"npm total downloads\" href=\"https://www.npmjs.com/package/eslint-plugin-better-tailwindcss?activeTab=readme\"\u003e\u003cpicture\u003e\u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/npm/dt/eslint-plugin-better-tailwindcss?style=flat-square\u0026labelColor=32363B\u0026color=ffffff\" /\u003e\u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://img.shields.io/npm/dt/eslint-plugin-better-tailwindcss?style=flat-square\u0026labelColor=EBEEF2\u0026color=000000\" /\u003e\u003cimg alt=\"eslint-plugin-better-tailwindcss logo\" src=\"https://img.shields.io/npm/dt/eslint-plugin-better-tailwindcss?style=flat-square\u0026labelColor=EBEEF2\u0026color=000000\" /\u003e\u003c/picture\u003e\u003c/a\u003e\n  \u003ca alt=\"GitHub repo stars\" href=\"https://github.com/schoero/eslint-plugin-better-tailwindcss/stargazers\"\u003e\u003cpicture\u003e\u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/github/stars/schoero/eslint-plugin-better-tailwindcss?style=flat-square\u0026labelColor=32363B\u0026color=ffffff\" /\u003e\u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://img.shields.io/github/stars/schoero/eslint-plugin-better-tailwindcss?style=flat-square\u0026labelColor=EBEEF2\u0026color=000000\" /\u003e\u003cimg alt=\"eslint-plugin-better-tailwindcss logo\" src=\"https://img.shields.io/github/stars/schoero/eslint-plugin-better-tailwindcss?style=flat-square\u0026labelColor=EBEEF2\u0026color=000000\"/\u003e\u003c/picture\u003e\u003c/a\u003e\n  \u003ca alt=\"GitHub sponsors\" href=\"https://github.com/sponsors/schoero\"\u003e\u003cpicture\u003e\u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://img.shields.io/github/sponsors/schoero?style=flat-square\u0026labelColor=32363B\u0026color=ffffff\" /\u003e\u003csource media=\"(prefers-color-scheme: light)\" srcset=\"hhttps://img.shields.io/github/sponsors/schoero?style=flat-square\u0026labelColor=EBEEF2\u0026color=000000\" /\u003e\u003cimg alt=\"eslint-plugin-better-tailwindcss logo\" src=\"https://img.shields.io/github/sponsors/schoero?style=flat-square\u0026labelColor=EBEEF2\u0026color=000000\" /\u003e\u003c/picture\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\nESLint/Oxlint plugin with formatting and linting rules to help you write cleaner, more maintainable Tailwind CSS.  \n\nThe formatting rules focus on improving readability by automatically breaking up long Tailwind class strings into multiple lines and sorting/grouping them in a logical order. The linting rules enforce best practices and catch potential issues, ensuring that you're writing valid Tailwind CSS.  \n\nThis plugin supports a wide range of projects, including React, Solid.js, Qwik, Svelte, Vue, Astro, Angular, HTML or plain JavaScript or TypeScript.  \n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg alt=\"eslint-plugin-better-tailwindcss example\" width=\"640px\" src=\"./assets/eslint-plugin-better-tailwindcss-demo.png\"\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  \u003ca href=\"https://github.com/sponsors/schoero\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./assets/sponsor-dark.svg\"\u003e\n      \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"./assets/sponsor-light.svg\"\u003e\n      \u003cimg alt=\"eslint-plugin-better-tailwindcss logo\" src=\"./assets/sponsor-light.svg\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n  \n  \u003cbr/\u003e\n  \u003cbr/\u003e\n  \n  [Buy me a coffee](https://buymeacoffee.com/schoero) | [GitHub Sponsors](https://github.com/sponsors/schoero)\n  \n  Help support this project.  \n  If you or your company benefit from this project, please consider becoming a sponsor or making a one-time donation.  \n  Your contribution will help me to maintain and develop the project.\n\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## Installation\n\n```sh\nnpm i -D eslint-plugin-better-tailwindcss\n```\n\n\u003cbr/\u003e\n\n## Quick start\n\nDepending on the flavor you are using, you need to install and configure the corresponding parser:\n\n- React: [.jsx](docs/parsers/jsx.md) · [.tsx](docs/parsers/tsx.md)  \n- SolidJS: [.jsx](docs/parsers/jsx.md) · [.tsx](docs/parsers/tsx.md)  \n- Qwik: [.jsx](docs/parsers/jsx.md) · [.tsx](docs/parsers/tsx.md)  \n- Svelte: [.svelte](docs/parsers/svelte.md)  \n- Vue: [.vue](docs/parsers/vue.md)  \n- Astro: [.astro](docs/parsers/astro.md)  \n- Angular: [.html, .ts](docs/parsers/angular.md)  \n- HTML: [.html](docs/parsers/html.md)  \n- CSS: [.css](docs/parsers/css.md)  \n- JavaScript: [.js](docs/parsers/javascript.md)  \n- TypeScript: [.ts](docs/parsers/typescript.md)  \n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n### Rules\n\nThe rules are categorized into two types: `stylistic` and `correctness`.\n\n#### Configs\n\nThe plugin offers three recommended configurations to help you get started quickly:\n  \n- `stylistic`: Enforces stylistic rules for tailwind classes.\n- `correctness`: Enforces correctness rules for tailwind classes.\n- `recommended`: Enforces both stylistic and correctness rules.\n  \nBy default:\n\n- `stylistic` rules are reported as warnings\n- `correctness` rules are reported as errors\n  \nYou can change the severity by adding a suffix to the config name:\n  \n- Use `-error` to report all rules as errors\n- Use `-warn` to report all rules as warnings\n  \nFor example, `recommended-warn` will report every rule as a warning and `stylistic-error` will report the formatting rules as errors.\n  \nIf you still use the old .eslintrc configuration format, you can prefix the config names with `legacy-`.\n\nFor example, `legacy-recommended` or `legacy-correctness-warn`.\n\nThe table below lists all available rules, the Tailwind CSS versions they support, and whether they are enabled by default in each recommended configuration:\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n#### Stylistic rules\n\n| Name | Description | `tw3` | `tw4` | `recommended` | autofix |\n| :--- | :--- | :---: | :---: | :---: | :---: |\n| [enforce-consistent-line-wrapping](docs/rules/enforce-consistent-line-wrapping.md) | Enforce consistent line wrapping for tailwind classes. | ✔ | ✔ | ✔ | ✔ |\n| [enforce-consistent-class-order](docs/rules/enforce-consistent-class-order.md) | Enforce a consistent order for tailwind classes. | ✔ | ✔ | ✔ | ✔ |\n| [enforce-consistent-variable-syntax](docs/rules/enforce-consistent-variable-syntax.md) | Enforce consistent variable syntax. | ✔ | ✔ |  | ✔ |\n| [enforce-consistent-important-position](docs/rules/enforce-consistent-important-position.md) | Enforce consistent position of the important modifier. | ✔ | ✔ |  | ✔ |\n| [enforce-shorthand-classes](docs/rules/enforce-shorthand-classes.md) | Enforce shorthand class names. | ✔ | ✔ |  | ✔ |\n| [enforce-canonical-classes](docs/rules/enforce-canonical-classes.md) | Enforce canonical class names. |  | ✔ | ✔ | ✔ |\n| [no-duplicate-classes](docs/rules/no-duplicate-classes.md) | Remove duplicate classes. | ✔ | ✔ | ✔ | ✔ |\n| [no-deprecated-classes](docs/rules/no-deprecated-classes.md) | Remove deprecated classes. |  | ✔ | ✔ | ✔ |\n| [no-unnecessary-whitespace](docs/rules/no-unnecessary-whitespace.md) | Disallow unnecessary whitespace in tailwind classes. | ✔ | ✔ | ✔ | ✔ |\n\n#### Correctness rules\n\n| Name | Description | `tw3` | `tw4` | `recommended` | autofix |\n| :--- | :--- | :---: | :---: | :---: | :---: |\n| [no-unknown-classes](docs/rules/no-unknown-classes.md) | Report classes not registered with Tailwind CSS. | ✔ | ✔ | ✔ |  |\n| [no-conflicting-classes](docs/rules/no-conflicting-classes.md) | Report classes that produce conflicting styles. |  | ✔ | ✔ |  |\n| [no-restricted-classes](docs/rules/no-restricted-classes.md) | Disallow restricted classes. | ✔ | ✔ |  | ✔ |\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n### Utilities\n\nThis plugin is pre-configured to lint tailwind classes for the most popular utilities:\n\n- [tailwind merge](https://github.com/dcastil/tailwind-merge): `twMerge` · `twJoin`\n- [class variance authority](https://github.com/joe-bell/cva): `cva`\n- [tailwind variants](https://github.com/nextui-org/tailwind-variants?tab=readme-ov-file): `tv`\n- [shadcn](https://ui.shadcn.com/docs/installation/manual): `cn`\n- [classcat](https://github.com/jorgebucaran/classcat): `cc`\n- [class list builder](https://github.com/crswll/clb): `clb`\n- [clsx](https://github.com/lukeed/clsx): `clsx`\n- [cnbuilder](https://github.com/xobotyi/cnbuilder): `cnb`\n- [classnames template literals](https://github.com/netlify/classnames-template-literals): `ctl`\n- [obj str](https://github.com/lukeed/obj-str): `objstr`\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n### Advanced configuration\n\nIf an utility is not supported by default, or you want to customize the configuration, you can define which [attributes](./docs/configuration/advanced.md#attribute), [callees](./docs/configuration/advanced.md#callee), [variables](./docs/configuration/advanced.md#variable), and [tags](./docs/configuration/advanced.md#tag) should get linted.  \nSee the [Advanced configuration guide](./docs/configuration/advanced.md) to learn how to override or extend the default settings.\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n### Editor configuration\n\n#### VSCode\n\n##### Auto-fix on save\n\nMost rules are intended to automatically fix the tailwind classes using VSCode extensions.\n\n###### ESLint\n\nFor ESLint, you can install the [VSCode ESLint plugin](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and configure it to automatically fix the classes on save by adding the following options to your `.vscode/settings.json`:\n\n```jsonc\n{\n  // enable VSCode to fix tailwind classes on save\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll.eslint\": \"explicit\"\n  }\n}\n```\n\n###### Oxlint\n\nFor Oxlint, you can install the [VSCode Oxc plugin](https://marketplace.visualstudio.com/items?itemName=oxc.oxc-vscode) and configure it to automatically fix the classes on save by adding the following options to your `.vscode/settings.json`:\n\n```jsonc\n{\n  // enable VSCode to fix tailwind classes on save\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll.oxc\": \"explicit\"\n  }\n}\n```\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschoero%2Feslint-plugin-better-tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fschoero%2Feslint-plugin-better-tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschoero%2Feslint-plugin-better-tailwindcss/lists"}