{"id":39015429,"url":"https://github.com/goldenpathtechnologies/tagged-classnames","last_synced_at":"2026-01-17T17:24:34.896Z","repository":{"id":143385253,"uuid":"615136296","full_name":"goldenpathtechnologies/tagged-classnames","owner":"goldenpathtechnologies","description":"A utility designed to ease maintenance and organization of Tailwind classes.","archived":false,"fork":false,"pushed_at":"2023-10-22T10:36:35.000Z","size":478,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-04T00:32:20.619Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tagged-classnames.goldenpath.ca/","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/goldenpathtechnologies.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":"goldenpathtechnologies"}},"created_at":"2023-03-17T02:54:07.000Z","updated_at":"2023-06-13T02:14:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"d2c3011c-99a2-4183-a351-372839c7f8e3","html_url":"https://github.com/goldenpathtechnologies/tagged-classnames","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/goldenpathtechnologies/tagged-classnames","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldenpathtechnologies%2Ftagged-classnames","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldenpathtechnologies%2Ftagged-classnames/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldenpathtechnologies%2Ftagged-classnames/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldenpathtechnologies%2Ftagged-classnames/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/goldenpathtechnologies","download_url":"https://codeload.github.com/goldenpathtechnologies/tagged-classnames/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goldenpathtechnologies%2Ftagged-classnames/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28512858,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T13:38:16.342Z","status":"ssl_error","status_checked_at":"2026-01-17T13:37:44.060Z","response_time":85,"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":[],"created_at":"2026-01-17T17:24:34.213Z","updated_at":"2026-01-17T17:24:34.877Z","avatar_url":"https://github.com/goldenpathtechnologies.png","language":"TypeScript","funding_links":["https://github.com/sponsors/goldenpathtechnologies"],"categories":[],"sub_categories":[],"readme":"# tagged-classnames\n\nA utility designed to ease maintenance and organization of Tailwind classes.\n\n![GitHub package.json version](https://img.shields.io/github/package-json/v/goldenpathtechnologies/tagged-classnames)\n[![Release](https://github.com/goldenpathtechnologies/tagged-classnames/actions/workflows/release.yml/badge.svg)](https://github.com/goldenpathtechnologies/tagged-classnames/actions/workflows/release.yml)\n[![Deploy Documentation Site to Pages](https://github.com/goldenpathtechnologies/tagged-classnames/actions/workflows/docs.yml/badge.svg)](https://github.com/goldenpathtechnologies/tagged-classnames/actions/workflows/docs.yml)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)\n![GitHub](https://img.shields.io/github/license/goldenpathtechnologies/tagged-classnames)\n\n## Demo\n\nSee `tagged-classnames` in action [here](https://tagged-classnames.goldenpath.ca/demo/).\n\n## Installation\n\nPNPM:\n\n```bash\npnpm add tagged-classnames\n```\n\nNPM:\n\n```bash\nnpm install tagged-classnames\n```\n\nYarn:\n\n```bash\nyarn install tagged-classnames\n```\n\n## Usage\n\n### Basic example\n\nImport `tagged-classnames` and use it to make long class lists more maintainable.\n\n```tsx\nimport tw from \"tagged-classnames\";\n\nexport default function Example() {\n  return (\n    \u003cbutton\n      type=\"button\"\n      className={tw`\n        text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300\n        font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600\n        dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800\n      `}\n    \u003e\n      Button\n    \u003c/button\u003e\n  );\n}\n```\n\nThe same can be accomplished using only a template literal, however, all whitespace would be retained. This is what \nthat looks like in the DOM:\n\n```html\n\u003cbutton type=\"button\" class=\"\n        text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300\n        font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600\n        dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800\n      \"\u003eButton\u003c/button\u003e\n```\n\nThis is what the same element looks like in the DOM after using `tagged-classnames`:\n\n```html\n\u003cbutton type=\"button\" class=\"text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800\"\u003eButton\u003c/button\u003e\n```\n\n`tagged-classnames` gives you the flexibility template literals offer while keeping the resulting DOM tidy.\n\n### String interpolation\n\n`tagged-classnames` retains the ability to use string interpolation as with plain template literals, but with an \nimportant [caveat](#known-limitations).\n\n```tsx\nimport tw from \"tagged-classnames\";\n\nexport default function Example({ someCondition }) {\n  return (\n    \u003cbutton\n      type=\"button\"\n      className={tw`\n        text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300\n        ${someCondition ? `font-medium` : `font-light`} rounded-lg text-sm px-5\n        py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none\n        dark:focus:ring-blue-800\n      `}\n    \u003e\n      Button\n    \u003c/button\u003e\n  );\n}\n```\n\nDon't do this:\n\n```jsx\n\u003cbutton\n  type=\"button\"\n  className={tw`\n    text-white bg-${someCondition ? `blue` : `green`}-700 hover:bg-blue-800\n    focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5\n    mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none\n    dark:focus:ring-blue-800\n  `}\n\u003e\n  Button\n\u003c/button\u003e\n```\n\nThe above example will produce `bg-`, `-700`, and one of `blue` or `green` classes. Use whole class names like in \nthe first string interpolation example if you need to conditionally apply classes.\n\n### Use variables for reusability and cleaner tags \n\n```tsx\nimport tw from \"tagged-classnames\";\n\nconst buttonStyles = tw`\n  text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300\n  font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600\n  dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800\n`;\n\nexport default function Example() {\n  return (\n    \u003cbutton type=\"button\" className={buttonStyles}\u003eButton\u003c/button\u003e\n  );\n}\n```\n\n### Line comments\n\n`tagged-classnames` supports line comments in the tag function's template literal to help document complex style rules.\n\n```tsx\nimport tw from \"tagged-classnames\";\n\nexport default function Example() {\n  return (\n    \u003cbutton\n      type=\"button\"\n      className={tw`\n        // Comment 1\n        text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300\n        \n        // Comment 2\n        font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600\n        \n        // Comment 3\n        dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800\n        \n        text-base // Comment 4\n      `}\n    \u003e\n      Button\n    \u003c/button\u003e\n  );\n}\n```\n\nComments are not rendered in the DOM and don't affect the formatting of the class list. String interpolation is not \nallowed in comments and will throw an error.\n\nDon't do this:\n\n```jsx\n\u003cbutton\n  type=\"button\"\n  className={tw`\n    // This is invalid and will throw an error: ${`text-base`}\n    text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300\n  `}\n\u003e\n  Button\n\u003c/button\u003e\n```\n\n### Block comments\n\nC-style block comments are also supported. The same string interpolation limitations as with line comments also \napplies to block comments.\n\n```tsx\nimport tw from \"tagged-classnames\";\n\nexport default function Example() {\n  return (\n    \u003cbutton\n      type=\"button\"\n      className={tw`\n        /* Block comment on one line */\n        text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300\n        font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600\n        \n        /**\n         * Block comment spanning multiple lines\n         */\n        dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800\n        \n        /* Don't do this! ${`text-normal`} An error will be thrown */\n      `}\n    \u003e\n      Button\n    \u003c/button\u003e\n  );\n}\n```\n\nAdditionally, block comments must be properly terminated or an error will be thrown.\n\n```jsx\n\u003cbutton\n  type=\"button\"\n  className={tw`\n    /* This is invalid and will throw an error due to an absent comment terminator\n    text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300\n  `}\n\u003e\n  Button\n\u003c/button\u003e\n```\n\n### Performant class list rendering\n\nAn alternative function `cx` is available for faster class list rendering if you don't need to use comments.\n\n```tsx\nimport { cx } from \"tagged-classnames\";\n\nexport default function Example() {\n  return (\n    \u003cbutton\n      type=\"button\"\n      className={cx`\n        text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300\n        font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600\n        dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800\n      `}\n    \u003e\n      Button\n    \u003c/button\u003e\n  );\n}\n```\n\nIf you're worried about performance, it's a good idea to use `cx` by default, and only use the default function if \nyou need to comment your classes.\n\n## Functions\n\n### `tw` (default)\n\nRemoves excessive whitespace and comments from CSS class lists. Enables flexible formatting of long lists of CSS \nclasses.\n\n```typescript\nfunction tw(classNames: TemplateStringsArray, ...args: string[]): string {}\n```\n\n### `cx`\n\nRemoves excessive whitespace from CSS class lists. Does not support comments. More performant than `tw`.\n\n```typescript\nfunction cx(classNames: TemplateStringsArray, ...args: string[]): string {}\n```\n\n## Known limitations\n\n- When using string interpolation in the `tagged-classnames` tag function, all interpolated values will be appended \n  to the end of the class list.\n- String interpolation can not be used to construct class names within the tag function. This must be done elsewhere \n  in the code.\n\n## Issues\n\nPlease report any issues with this software\n[here](https://github.com/goldenpathtechnologies/tagged-classnames/issues). If you would like to contribute to \nthis project, feel free to fork it and send a pull request. Note that this project is governed by a\n[code of conduct](https://github.com/goldenpathtechnologies/tagged-classnames/blob/main/CODE_OF_CONDUCT.md).\n\n## License\n\nThis project is [MIT](https://github.com/goldenpathtechnologies/tagged-classnames/blob/main/LICENSE) \nlicensed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoldenpathtechnologies%2Ftagged-classnames","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoldenpathtechnologies%2Ftagged-classnames","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoldenpathtechnologies%2Ftagged-classnames/lists"}