{"id":19377785,"url":"https://github.com/aacn/eslint-plugin-tailwind-classname-order","last_synced_at":"2025-10-27T22:43:12.278Z","repository":{"id":58732238,"uuid":"531718414","full_name":"aacn/eslint-plugin-tailwind-classname-order","owner":"aacn","description":"Sort tailwind className strings by a given order-config","archived":false,"fork":false,"pushed_at":"2025-04-22T13:26:45.000Z","size":169,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-22T20:57:28.136Z","etag":null,"topics":["classnames","cleanup","eslint","eslint-plugin","organization","prettier","structure","tailwindcss","utility-classes"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@aacn.eu/eslint-plugin-tailwind-classname-order","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/aacn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","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},"funding":{"github":"aacn"}},"created_at":"2022-09-01T23:37:55.000Z","updated_at":"2025-08-19T08:46:57.000Z","dependencies_parsed_at":"2024-11-10T09:04:12.599Z","dependency_job_id":"9f4c0796-8fa9-4e52-9598-05ad5cb0d4fb","html_url":"https://github.com/aacn/eslint-plugin-tailwind-classname-order","commit_stats":{"total_commits":17,"total_committers":3,"mean_commits":5.666666666666667,"dds":"0.23529411764705888","last_synced_commit":"d2f2167be1419f766134e22ada058ca01d4e4554"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/aacn/eslint-plugin-tailwind-classname-order","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aacn%2Feslint-plugin-tailwind-classname-order","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aacn%2Feslint-plugin-tailwind-classname-order/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aacn%2Feslint-plugin-tailwind-classname-order/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aacn%2Feslint-plugin-tailwind-classname-order/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aacn","download_url":"https://codeload.github.com/aacn/eslint-plugin-tailwind-classname-order/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aacn%2Feslint-plugin-tailwind-classname-order/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281355366,"owners_count":26486896,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-27T02:00:05.855Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["classnames","cleanup","eslint","eslint-plugin","organization","prettier","structure","tailwindcss","utility-classes"],"created_at":"2024-11-10T09:03:35.147Z","updated_at":"2025-10-27T22:43:12.240Z","avatar_url":"https://github.com/aacn.png","language":"TypeScript","funding_links":["https://github.com/sponsors/aacn"],"categories":[],"sub_categories":[],"readme":"![GitHub package.json version](https://img.shields.io/github/package-json/v/MarlonAACN/eslint-plugin-tailwind-classname-order?style=flat-square)\n![GitHub](https://img.shields.io/github/license/MarlonAACN/eslint-plugin-tailwind-classname-order?style=flat-square)\n![GitHub repo size](https://img.shields.io/github/repo-size/MarlonAACN/eslint-plugin-tailwind-classname-order?style=flat-square)\n# eslint-plugin-tailwind-classname-order\n\nThis eslint plugin automatically orders the tailwind classes included in the className tags from\neach element by the provided default order list.\n\n- [1. Features](#features)\n- [2. Roadmap](#roadmap)\n- [3. Currently supported tailwind classes](#currently-supported-tailwind-classes)\n- [4. Explicitly unsupported classes](#explicitly-unsupported-classes)\n- [5. Default order config](#default-order-config)\n- [6. Installation](#installation)\n- [7. Usage](#usage)\n\n## Features\n- [x] Order tailwind classes by given config\n- [x] Recognize predefined classes\n- [x] Recognize negative valued class names\n- [x] Recognize states like hover,active,peer etc.\n- [x] Recognize stacked states properly.\n- [x] Recognize mediaquerys\n- [x] Support for [tailwind-rn](https://www.npmjs.com/package/tailwind-rn)\n- [x] Supporting not only strings, but also expressions\n\n## Roadmap\n1. Remove the 'img' slug restriction for bg-images and be more flexible with custom defined values\nin general, by reading the projects ```tailwind.config.js```.\n2. ~~Include className objects that are not string typed instead of just ignoring them.~~\n3. Make custom ordering for the user more accessible and easier.\n\n## Currently supported tailwind classes\nFor the latest version the following tailwind classes are supported by the order plugin.\nClasses that are not yet included, will be treated as predefined custom classes.\nClasses are categorized as seen in the tailwind documentation [here](https://tailwindcss.com/docs)\n\u003cbr/\u003e\n\n![](https://progress-bar.dev/100/?title=Layout)\n![](https://progress-bar.dev/100/?title=Flexbox_Grid)\n![](https://progress-bar.dev/100/?title=Spacing)\u003cbr/\u003e\n![](https://progress-bar.dev/100/?title=Sizing)\n![](https://progress-bar.dev/99/?title=Typography)\n![](https://progress-bar.dev/98/?title=Backgrounds)\u003cbr/\u003e\n![](https://progress-bar.dev/98/?title=Borders)\n![](https://progress-bar.dev/99/?title=Effects)\n![](https://progress-bar.dev/100/?title=Filters)\u003cbr/\u003e\n![](https://progress-bar.dev/100/?title=Tables)\n![](https://progress-bar.dev/100/?title=Transitions_Animations)\n![](https://progress-bar.dev/100/?title=Transformers)\u003cbr/\u003e\n![](https://progress-bar.dev/100/?title=Interactivity)\n![](https://progress-bar.dev/98/?title=SVG)\n![](https://progress-bar.dev/100/?title=Accessibility)\u003cbr/\u003e\n\nIt's mentionable that in the current version it's necessary, that when setting an image as background, which is predefined\nin the tailwind config, that the name of the image needs to include 'img' in its name, so that the\nplugin is able to identity it as such.\n```sh\n# will be detected as bg-img element\nbg-MY-img-BACKGROUND\n\n# won't be detected as bg-img and instead be treated as bg-color\nbg-MY-BACKGROUND\n```\n\n## Explicitly unsupported classes\nSome classes in tailwind have counterparts with the same name and since interpreting arbitrary values\nis not supported on the current version, they won't be detected properly.\nThere are two major differences:\n1. The plugin doesn't support arbitrary values in any way for the certain class. Even when they're\npredefined in the tw config file, they won't be interpreted properly.\n2. The plugin can't interpret arbitrary values when they're added inline, but the plugin will be able\nto detect the proper class, when the value is predefined in the config.\n\u003cbr/\u003eThis Problem will presumably be fixed with a future version.\n\n- Font Family (inline)\n- Text Color (inline)\n- Text Decoration Color (inline)\n- Background Size (arbitrary generally)\n- Background Position (arbitrary generally)\n- Stroke Color (inline)\n- Border Color (inline)\n- Outline Color (inline)\n- Ring Color (inline)\n- Ring Offset Color (inline)\n- Box Shadow Color (inline)\n\n## Default order config\n- predefined class\n\n#### #browser behavior\n- box-sizing\n\n#### #object reference - High priority because it refers to neighboring content\n- peer\n- group\n\n#### #object identity, positioning (where)\n- position\n- (position) top, right, bottom, left\n- visibility\n- z-index\n\n#### #object identity, sizing (how)\n- (flex) flex width\n- (flex) basis\n- container\n- width\n- width-min\n- width-max\n- height\n- height-min\n- height-max\n- aspect-ratio\n\n#### #object identity, core identity (what)\n- display\n\n#### #flex identity, core flex identity (what flex)\n- (flex) direction (row/col)\n- (flex) wrap\n\n#### #grid identity, core grid identity (what grid)\n- (grid) grid-cols (grid-template-columns)\n- (grid) grid-column\n- (grid) grid-rows (grid-template-rows)\n- (grid) grid-row\n- (grid) grid-flow\n- (grid) auto-cols\n- (grid) auto-rows\n- (grid) justify items\n- (grid) justify self\n- (grid) align content\n\n#### #flex/grid identity, core flex/grid identity (what flex/grid)\n- (flex / grid) justify-content\n- (flex / grid) align-items\n- (flex / grid) align self\n- (flex / grid) gap (x, y)\n\n#### #object identity, environmental behaviour\n- place items\n- place content\n- place self\n- padding-x\n- padding-y\n- padding (top, right, bottom, left)\n- margin-x\n- margin-y\n- margin (top, right, bottom, left)\n- space between (x, y)\n- float\n- clear\n- isolation\n\n#### #object identity modification\n- transform (x, y, rotate, scale, skew)\n- transform origin\n\n#### #content behaviour\n- object fit\n- object position\n- overflow\n- overscroll\n- order\n- break-before\n- break-after\n- break-inside\n- box decoration break\n\n#### #styling - content / text related\n- whitespace\n\n#### #text styling\n- font-family\n- font-size\n- font smoothing\n- font-weight\n- font-style\n- font-variant-numeric\n- tracking (letter spacing)\n- leading (line-height)\n- list style type\n- list style position\n- text alignment\n- text-color\n- text-transform\n- text-overflow\n- text-decoration\n- text-decoration-color\n- text-decoration-style\n- text-decoration-thickness\n- text-underline-offset\n- text-indent\n- word break\n- vertical align\n- pseudo-class content\n\n#### #body behaviour\n- opacity\n\n#### #body styling\n- background (url, repeat, pos, size)\n- background-attachment\n- background-clip\n- background-color\n- background-origin\n- gradient color from-{color}\n- gradient color middle-{color}\n- gradient color to-{color}\n- mix-blend-mode\n- background blend mode\n- (svg) fill\n- (svg) stroke color\n- (svg) stroke width\n- border (style, width, radius)\n- border-color\n- divide (x, y)\n- divide color\n- divide-style\n- outline-width\n- outline-style\n- outline-offset\n- ring width\n- ring color\n- ring offset width\n- ring offset color\n- box-shadow\n- box-shadow-color\n\n#### #table styling\n- border-collapse\n- border-spacing\n- table-layout\n\n#### #filters\n- blur\n- brightness\n- contrast\n- drop-shadow\n- grayscale\n- hue-rotate\n- invert\n- saturate\n- sepia\n- backdrop blur\n- backdrop brightness\n- backdrop contrast\n- backdrop grayscale\n- backdrop hue rotate\n- backdrop invert\n- backdrop opacity\n- backdrop saturate\n- backdrop sepia\n\n#### #transitions \u0026 animation\n- transition (property, duration, timing function, delay)\n- animate\n\n#### #interactivity\n- accent-color\n- appearance\n- cursor\n- caret-color\n- pointer events\n- resize\n- scroll behavior\n- scroll padding (x, y)\n- scroll margin (x, y)\n- scroll snap align\n- scroll snap stop\n- scroll snap type\n- touch action\n- user select\n- will-change\n\n#### #accesiblility\n- screen readers\n\n#### #state management\nStates are priority wise in the same order as they are presented on the [tailwind docs (states)](https://tailwindcss.com/docs/hover-focus-and-other-states#appendix), excluding the ```@media``` type prefixes.\n\n#### #media queries\nThis plugin supports the default breakpoint prefixes as listed on the [tailwind docs for responsive design](https://tailwindcss.com/docs/responsive-design). \u003cbr/\u003e\nFurthermore more custom prefixes are also already added. The ```orderConfig.json``` file can of course be altered to include even more custom breakpoint prefixes.\n- xs\n- sm\n- md\n- 2md\n- lg\n- 2lg\n- xl\n- 2xl\n- 3xl\n\n## Installation\n\nYou'll first need to install [ESLint](https://eslint.org/):\n\n#### With npm\n```sh\n# via npm\nnpm install eslint --save-dev\n\n# via yarn\nyarn add -D eslint\n```\n\nNext, install `eslint-plugin-tailwind-classname-order`:\n\n```sh\n# via npm\nnpm install @aacn.eu/eslint-plugin-tailwind-classname-order --save-dev\n\n# via yarn\nyarn add -D @aacn.eu/eslint-plugin-tailwind-classname-order\n```\n\n\n## Usage\n\nAdd `tailwind-classname-order` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:\n\n```json\n{\n    \"plugins\": [\n        \"@aacn.eu/tailwind-classname-order\"\n    ]\n}\n```\n\n\nThen configure the rules you want to use under the rules section.\u003cbr/\u003e\nThis includes the path to the rule file and its severity\u003cbr/\u003e\nMore about eslints severity can be found [here](https://eslint.org/docs/latest/user-guide/configuring/rules)\n\n```json\n{\n    \"rules\": {\n        \"@aacn.eu/tailwind-classname-order/order\": 2\n    }\n}\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faacn%2Feslint-plugin-tailwind-classname-order","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faacn%2Feslint-plugin-tailwind-classname-order","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faacn%2Feslint-plugin-tailwind-classname-order/lists"}