{"id":46802066,"url":"https://github.com/ony3000/prettier-plugin-classnames","last_synced_at":"2026-03-10T06:04:57.452Z","repository":{"id":189515709,"uuid":"678653886","full_name":"ony3000/prettier-plugin-classnames","owner":"ony3000","description":"A Prettier plugin that wraps verbose class name based on the `printWidth` option.","archived":false,"fork":false,"pushed_at":"2026-02-07T15:23:43.000Z","size":2575,"stargazers_count":194,"open_issues_count":10,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-02-07T18:11:55.433Z","etag":null,"topics":["class","classname","plugin","prettier","prettier-plugin","tailwindcss","verbose","wrap"],"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/ony3000.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-08-15T03:41:43.000Z","updated_at":"2026-02-07T15:23:41.000Z","dependencies_parsed_at":"2024-01-17T15:38:07.041Z","dependency_job_id":"acffecb0-52ab-4c78-b529-bfed1bf098ea","html_url":"https://github.com/ony3000/prettier-plugin-classnames","commit_stats":null,"previous_names":["ony3000/prettier-plugin-classnames"],"tags_count":39,"template":false,"template_full_name":"ony3000/node-library-template","purl":"pkg:github/ony3000/prettier-plugin-classnames","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ony3000%2Fprettier-plugin-classnames","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ony3000%2Fprettier-plugin-classnames/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ony3000%2Fprettier-plugin-classnames/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ony3000%2Fprettier-plugin-classnames/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ony3000","download_url":"https://codeload.github.com/ony3000/prettier-plugin-classnames/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ony3000%2Fprettier-plugin-classnames/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30326878,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T05:25:20.737Z","status":"ssl_error","status_checked_at":"2026-03-10T05:25:17.430Z","response_time":106,"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":["class","classname","plugin","prettier","prettier-plugin","tailwindcss","verbose","wrap"],"created_at":"2026-03-10T06:04:57.000Z","updated_at":"2026-03-10T06:04:57.434Z","avatar_url":"https://github.com/ony3000.png","language":"TypeScript","readme":"\u003cdiv align=\"right\"\u003e\n  \u003cdetails\u003e\n    \u003csummary \u003e🌐 Language\u003c/summary\u003e\n    \u003cdiv\u003e\n      \u003cdiv align=\"center\"\u003e\n        \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=en\"\u003eEnglish\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=zh-CN\"\u003e简体中文\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=zh-TW\"\u003e繁體中文\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=ja\"\u003e日本語\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=ko\"\u003e한국어\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=hi\"\u003eहिन्दी\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=th\"\u003eไทย\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=fr\"\u003eFrançais\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=de\"\u003eDeutsch\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=es\"\u003eEspañol\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=it\"\u003eItaliano\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=ru\"\u003eРусский\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=pt\"\u003ePortuguês\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=nl\"\u003eNederlands\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=pl\"\u003ePolski\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=ar\"\u003eالعربية\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=fa\"\u003eفارسی\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=tr\"\u003eTürkçe\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=vi\"\u003eTiếng Việt\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=id\"\u003eBahasa Indonesia\u003c/a\u003e\n        | \u003ca href=\"https://openaitx.github.io/view.html?user=ony3000\u0026project=prettier-plugin-classnames\u0026lang=as\"\u003eঅসমীয়া\u003c/\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/details\u003e\n\u003c/div\u003e\n\n# prettier-plugin-classnames\n\nA Prettier plugin that wraps verbose class name based on the `printWidth` option.\n\n![A use case for this plugin.](.github/banner.png)\n\n## Installation[^1]\n\n```sh\nnpm install -D prettier prettier-plugin-classnames\n```\n\n[^1]: If your version of `prettier-plugin-classnames` is less than `0.4.0`, you will also need to install `@prettier/sync`.\n\n## Configuration\n\nJSON example:\n\n```json\n{\n  \"plugins\": [\"prettier-plugin-classnames\"]\n}\n```\n\nJS example (CommonJS module):\n\n```javascript\nmodule.exports = {\n  plugins: ['prettier-plugin-classnames'],\n  customAttributes: ['myClassProp'],\n  customFunctions: ['clsx'],\n};\n```\n\nJS example (ES module):\n\n```javascript\nexport default {\n  plugins: ['prettier-plugin-classnames'],\n  endingPosition: 'absolute',\n};\n```\n\n## Options\n\n### Custom Attributes\n\nList of attributes that enclosing class names.\u003cbr\u003e\nThe `class` and `className` attributes are always supported, even if no options are specified.\n\n\u003c!-- prettier-ignore --\u003e\nDefault | CLI\u0026nbsp;Override | API\u0026nbsp;Override\n--- | --- | ---\n`[]` | `--custom-attributes \u003cstring\u003e` | `customAttributes: [\"\u003cstring\u003e\"]`\n\n### Custom Functions\n\nList of functions that enclosing class names.\u003cbr\u003e\nThe `classNames` function is always supported, even if no options are specified.\n\n\u003c!-- prettier-ignore --\u003e\nDefault | CLI\u0026nbsp;Override | API\u0026nbsp;Override\n--- | --- | ---\n`[]` | `--custom-functions \u003cstring\u003e` | `customFunctions: [\"\u003cstring\u003e\"]`\n\n### Ending Position\n\nFirst available in v0.5.0.\u003cbr\u003e\n`absolute-with-indent` was added in v0.6.0.\u003cbr\u003e\n`absolute-with-indent` was removed in v0.8.0, but you can get the same output with `absolute`.\u003cbr\u003e\nDefault value changed from `relative` to `absolute` in v0.8.0.\n\nThis is the criterion for ending the class name on each line when replacing the original class name with a multi-line class name.\n\n- `absolute` example:\n\n  ```\n  --------------------------------------------------| printWidth=50\n  export function Callout({ children }) {\n    return (\n      \u003cdiv\n        className=\"bg-gray-100/50 border\n          border-zinc-400/30 dark:bg-neutral-900/50\n          dark:border-neutral-500/30 px-4 py-4\n          rounded-xl\"\n      \u003e\n        {children}\n      \u003c/div\u003e\n    );\n  }\n  ```\n\n- `relative` example:\n\n  ```\n  --------------------------------------------------| printWidth=50\n  export function Callout({ children }) {\n    return (\n      \u003cdiv\n                  |--------------------------------------------------|\n        className=\"bg-gray-100/50 border border-zinc-400/30\n         |--------------------------------------------------|\n          dark:bg-neutral-900/50 dark:border-neutral-500/30\n          px-4 py-4 rounded-xl\"\n      \u003e\n        {children}\n      \u003c/div\u003e\n    );\n  }\n  ```\n\n\u003c!-- prettier-ignore --\u003e\nDefault | CLI\u0026nbsp;Override | API\u0026nbsp;Override\n--- | --- | ---\n`\"absolute\"` | `--ending-position \u003cabsolute\\|relative\u003e` | `endingPosition: \"\u003cabsolute\\|relative\u003e\"`\n\n### Syntax Transformation\n\nFirst available in v0.7.7.\n\nIf a line wrapping occurs in a class name written in non-expression syntax, it is transformed into expression syntax. This transformation does not support reversible formatting.\n\n\u003c!-- prettier-ignore --\u003e\nDefault | CLI\u0026nbsp;Override | API\u0026nbsp;Override\n--- | --- | ---\n`false` | `--syntax-transformation` | `syntaxTransformation: \u003cboolean\u003e`\n\n## Version correlation with sibling plugins\n\nStarting with `0.6.0`, when there is a minor release on one side, I plan to reflect that change on the other side as well if possible.\n\n![Version correlation.](.github/correlation.png)\n\n## Compatibility with other Prettier plugins\n\nIf more than one Prettier plugin can handle the text you want to format, Prettier will only use the last of those plugins.\n\nIn this case, you can configure it as follows by adding [prettier-plugin-merge](https://github.com/ony3000/prettier-plugin-merge) to apply those plugins sequentially.\n\nJSON example:\n\n\u003c!-- prettier-ignore --\u003e\n```json\n{\n  \"plugins\": [\n    \"prettier-plugin-tailwindcss\",\n    \"prettier-plugin-classnames\",\n    \"prettier-plugin-merge\"\n  ]\n}\n```\n\n## Stargazers over time\n\n[![Stargazers over time](https://starchart.cc/ony3000/prettier-plugin-classnames.svg?variant=adaptive)](https://starchart.cc/ony3000/prettier-plugin-classnames)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fony3000%2Fprettier-plugin-classnames","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fony3000%2Fprettier-plugin-classnames","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fony3000%2Fprettier-plugin-classnames/lists"}