{"id":22264278,"url":"https://github.com/ttskch/prettier-plugin-tailwindcss-anywhere","last_synced_at":"2025-07-28T10:32:13.680Z","repository":{"id":261802868,"uuid":"885366985","full_name":"ttskch/prettier-plugin-tailwindcss-anywhere","owner":"ttskch","description":"A Prettier plugin for sorting TailwindCSS classes in any HTML-like language, like Twig etc⚡","archived":false,"fork":false,"pushed_at":"2024-11-26T01:53:57.000Z","size":56,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-26T02:27:02.456Z","etag":null,"topics":["formatter","html","prettier","prettier-plugin","tailwindcss","twig"],"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/ttskch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2024-11-08T12:59:23.000Z","updated_at":"2024-11-26T01:50:06.000Z","dependencies_parsed_at":"2024-11-11T16:15:21.204Z","dependency_job_id":null,"html_url":"https://github.com/ttskch/prettier-plugin-tailwindcss-anywhere","commit_stats":null,"previous_names":["ttskch/prettier-plugin-tailwindcss-anywhere"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttskch%2Fprettier-plugin-tailwindcss-anywhere","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttskch%2Fprettier-plugin-tailwindcss-anywhere/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttskch%2Fprettier-plugin-tailwindcss-anywhere/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttskch%2Fprettier-plugin-tailwindcss-anywhere/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ttskch","download_url":"https://codeload.github.com/ttskch/prettier-plugin-tailwindcss-anywhere/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227895725,"owners_count":17836454,"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","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":["formatter","html","prettier","prettier-plugin","tailwindcss","twig"],"created_at":"2024-12-03T10:08:23.890Z","updated_at":"2025-07-28T10:32:13.272Z","avatar_url":"https://github.com/ttskch.png","language":"TypeScript","readme":"# prettier-plugin-tailwindcss-anywhere\n\n[![](https://github.com/ttskch/prettier-plugin-tailwindcss-anywhere/actions/workflows/ci.yaml/badge.svg?branch=main)](https://github.com/ttskch/prettier-plugin-tailwindcss-anywhere/actions/workflows/ci.yaml?query=branch:main)\n[![codecov](https://codecov.io/gh/ttskch/prettier-plugin-tailwindcss-anywhere/graph/badge.svg?token=GEZ1cdUmSx)](https://codecov.io/gh/ttskch/prettier-plugin-tailwindcss-anywhere)\n[![NPM Version](https://img.shields.io/npm/v/%40ttskch%2Fprettier-plugin-tailwindcss-anywhere)](https://www.npmjs.com/package/@ttskch/prettier-plugin-tailwindcss-anywhere)\n[![NPM Downloads](https://img.shields.io/npm/dm/%40ttskch%2Fprettier-plugin-tailwindcss-anywhere)](https://www.npmjs.com/package/@ttskch/prettier-plugin-tailwindcss-anywhere)\n\nA Prettier plugin for sorting TailwindCSS classes **in any HTML-like language, like Twig etc**⚡\n\n## Requirements\n\n* Node: `\u003e= 20.9 \u003c 24`\n\n## Installation\n\n```shell\nnpm install -D prettier \\\n               prettier-plugin-tailwindcss \\\n               @ttskch/prettier-plugin-tailwindcss-anywhere\n```\n\n## Usage\n\nThis plugin is intended to be used in conjunction with [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss).\n\nFor example, by setting `.prettierrc` as follows, you can sort classes even in files of template engines such as [Twig](https://twig.symfony.com/) that cannot be processed by prettier-plugin-tailwindcss.\n\n```json5\n// .prettierrc\n{\n  \"plugins\": [\"prettier-plugin-tailwindcss\", \"@ttskch/prettier-plugin-tailwindcss-anywhere\"],\n  \"overrides\": [\n    {\n      \"files\": \"*.html.twig\",\n      \"options\": {\n        \"parser\": \"anywhere\",\n      }\n    }\n  ]\n}\n```\n\n### Before\n\n```twig\n{% extends 'base.html.twig %}\n  {% block content %}\n    \u003cdiv class=\"space-y-4 flex-col flex\"\u003e\n      \u003cdiv class=\"p-4 rounded-lg bg-blue-500 text-white rounded-lg p-4\"\u003e\n        Hello, {{ name }}!\n      \u003c/div\u003e\n    \u003c/div\u003e\n  {% endblock %}\n{% endblock %}\n```\n\n### After\n\n```diff\n  {% extends 'base.html.twig %}\n    {% block content %}\n-     \u003cdiv class=\"space-y-4 flex-col flex\"\u003e\n+     \u003cdiv class=\"flex flex-col space-y-4\"\u003e\n-       \u003cdiv class=\"p-4 rounded-lg bg-blue-500 text-white rounded-lg p-4\"\u003e\n+       \u003cdiv class=\"rounded-lg bg-blue-500 p-4 text-white\"\u003e\n          Hello, {{ name }}!\n        \u003c/div\u003e\n      \u003c/div\u003e\n    {% endblock %}\n  {% endblock %}\n```\n\n## Options\n\n### `regex` \n\n**default:** `class=\"([^\"]*)\"`\n\nThe `regex` option allows you to specify the part that corresponds to the value of the class attribute using a regular expression.\n\nFor example, if you have the following text:\n\n```twig\n\u003cdiv class=\"space-y-4 flex-col flex {% if foo %}is-foo{% endif %}\"\u003e\n```\n\nIn this case, you can specify the following `regex` to sort only the part before `{% if foo %}`.\n\n```json5\n{\n  \"options\": {\n    \"parser\": \"anywhere\",\n    \"regex\": \"class=\\\"([^{}\\\"]*)(?:\\\"| {)\", // \u003c-- here\n  }\n}\n```\n\n```diff\n- \u003cdiv class=\"space-y-4 flex-col flex {% if foo %}is-foo{% endif %}\"\u003e\n+ \u003cdiv class=\"flex flex-col space-y-4 {% if foo %}is-foo{% endif %}\"\u003e\n```\n\n\u003e [!NOTE]\n\u003e Note that you need to surround the part you want to see as the class attribute value with `()` so that the plugin can backreference it.\n\n## Getting involved\n\n```shell\npnpm install\n\n# Develop...\n\npnpm check\npnpm test\npnpm build\n```\n\nThanks! 🎉\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fttskch%2Fprettier-plugin-tailwindcss-anywhere","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fttskch%2Fprettier-plugin-tailwindcss-anywhere","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fttskch%2Fprettier-plugin-tailwindcss-anywhere/lists"}