{"id":15392105,"url":"https://github.com/sudoaugustin/tailwindcss-shorthand","last_synced_at":"2025-03-02T06:19:40.662Z","repository":{"id":256024176,"uuid":"854149209","full_name":"sudoaugustin/tailwindcss-shorthand","owner":"sudoaugustin","description":"Useful tailwindcss shorthand classes and variants to boost productivity","archived":false,"fork":false,"pushed_at":"2024-10-29T11:57:34.000Z","size":75,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-12T18:51:39.239Z","etag":null,"topics":["data-attributes","npm-packages","shorthands","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/tailwindcss-shorthand","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sudoaugustin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-09-08T14:04:54.000Z","updated_at":"2024-10-29T11:56:23.000Z","dependencies_parsed_at":"2025-01-12T18:42:59.902Z","dependency_job_id":"df4d15fc-5ca2-4d49-af06-ff7d7b6e7151","html_url":"https://github.com/sudoaugustin/tailwindcss-shorthand","commit_stats":{"total_commits":16,"total_committers":1,"mean_commits":16.0,"dds":0.0,"last_synced_commit":"6b6170a459087c198946125a60c65064dc0aafa7"},"previous_names":["sudoaugustin/tailwindcss-plugin","sudoaugustin/tailwindcss-shorthand"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sudoaugustin%2Ftailwindcss-shorthand","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sudoaugustin%2Ftailwindcss-shorthand/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sudoaugustin%2Ftailwindcss-shorthand/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sudoaugustin%2Ftailwindcss-shorthand/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sudoaugustin","download_url":"https://codeload.github.com/sudoaugustin/tailwindcss-shorthand/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241466182,"owners_count":19967418,"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":["data-attributes","npm-packages","shorthands","tailwindcss-plugin"],"created_at":"2024-10-01T15:14:02.311Z","updated_at":"2025-03-02T06:19:40.643Z","avatar_url":"https://github.com/sudoaugustin.png","language":"TypeScript","readme":"# Useful tailwindcss shorthand classes and variants to boost productivity\n\n## Installation\n\n```bash\n// NPM\nnpm install tailwindcss-shorthand --save-dev\n\n// YARN\nyarn add tailwindcss-shorthand -D\n\n// PNPM\npnpm add tailwindcss-shorthand -D\n```\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  content: [],\n  theme: {\n    extend: {},\n  },\n  plugins: [require(\"tailwindcss-shorthand\")()],\n};\n```\n\n## Utilities\n\n### `a-$wx$h`\n\n```html\n// Before\n\u003cdiv class=\"w-5 h-10\"\u003e\u003c/div\u003e\n\n// After\n\u003cdiv class=\"a-5x10\"\u003e\u003c/div\u003e\n```\n\n#### Arbitrary values\n\n```html\n\u003cdiv class=\"a-[5rem]\"\u003e\u003c/div\u003e\n\n\u003cdiv class=\"a-[5remx100%]\"\u003e\u003c/div\u003e\n```\n\nIf you feel like the built-in `size-5` is long, you can do `a-5`.\n\n### `p-$yx$x`\n\nExtends the built-in `p-*` to declare shorthand padding.\n\n```html\n// Before\n\u003cdiv class=\"py-5 px-10\"\u003e\u003c/div\u003e\n\n// After\n\u003cdiv class=\"p-5x10\"\u003e\u003c/div\u003e\n```\n\nNote: You can still use the built-in padding utilities `p-5` and `p-[5rem]`.\n\n### `m-$yx$x`\n\nExtends the built-in `m-*` to declare shorthand margin.\n\n```html\n// Before\n\u003cdiv class=\"my-5 mx-10\"\u003e\u003c/div\u003e\n\n// After\n\u003cdiv class=\"m-5x10\"\u003e\u003c/div\u003e\n```\n\nNote: You can still use the built-in margin utilities `m-5` and `m-[5rem]`.\n\n### `gap-$yx$x`\n\nExtends the built-in `gap-*` to declare shorthand gap.\n\n```html\n// Before\n\u003cdiv class=\"gap-y-5 gap-x-10\"\u003e\u003c/div\u003e\n\n// After\n\u003cdiv class=\"gap-5x10\"\u003e\u003c/div\u003e\n```\n\nNote: You can still use the built-in gap utilities `gap-5` and `gap-[5rem]`.\n\n### `z-*`\n\nExtend the built-in `z-*`.\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  content: [],\n  theme: {\n    extend: {},\n  },\n  plugins: [\n    require(\"tailwindcss-shorthand\")({\n      // Default [\"5\", \"10\", \"15\", \"20\", \"25\", \"30\", \"35\", \"40\", \"45\", \"50\"]\n      zIndexes: new Array(50).fill(null).map((_, i) =\u003e i + 1),\n    }),\n  ],\n};\n```\n\n### Flex alignments\n\n```html\n// Before\n\u003cdiv class=\"justify-start items-start\"\u003e\u003c/div\u003e\n\u003cdiv class=\"justify-center items-center\"\u003e\u003c/div\u003e\n\u003cdiv class=\"justify-end items-end\"\u003e\u003c/div\u003e\n\u003cdiv class=\"justify-stretch items-stretch\"\u003e\u003c/div\u003e\n\n// After\n\u003cdiv class=\"flex-start\"\u003e\u003c/div\u003e\n\u003cdiv class=\"flex-center\"\u003e\u003c/div\u003e\n\u003cdiv class=\"flex-end\"\u003e\u003c/div\u003e\n\u003cdiv class=\"flex-stretch\"\u003e\u003c/div\u003e\n```\n\n## Variants\n\n### `state-*:`\n\n```TSX\n// Before\n\u003cdiv className={`${isOn ? \"bg-green-600\" : \"bg-slate-800\"}`}\u003e\u003c/div\u003e\n\u003cdiv data-state={ isOn ? \"on\" : \"off\" } className=\"bg-slate-800 data-[state=on]:bg-green-600\"\u003e\u003c/div\u003e\n\n// After\n\u003cdiv data-state={ isOn ? \"on\" : \"off\" } className=\"bg-slate-800 state-on:bg-green-600\"\u003e\u003c/div\u003e\n\u003cdiv data-state={ isOn ? \"on\" : \"off\" } className=\"bg-slate-800 state-on:bg-green-600\"\u003e\u003c/div\u003e\n```\n\nYou can also use the `group-state-*` \u0026 `peer-state-*` modifiers. To add custom states, see [here](#states).\n\n### `$dataName-$dataValue`\n\nThis is a extended version of the `state-*` variant.\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  content: [],\n  theme: {\n    extend: {},\n  },\n  plugins: [\n    require(\"tailwindcss-shorthand\")({\n      // Default {}\n      data: {\n        align: [\"left\", \"center\", \"women\"],\n      },\n    }),\n  ],\n};\n```\n\n```TSX\n// Before\n\u003cdiv data-align={alignment} class=\"data-[align=left]:left-0 data-[align=top]:top-0\" \u003e\u003c/div\u003e\n\n// After\n\u003cdiv data-align={alignment} class=\"align-left:left-0 align-top:top-0\" \u003e\u003c/div\u003e\n```\n\n### `1st`, `2nd`, `3rd`, ..., `10th`\n\n```TSX\n// Before\n\u003cdiv className={`${index === 1 ? \"col-span-4\" : index === 2 ? \"col-span-3\" : \"col-span-1\"}`}\u003e\u003c/div\u003e\n\n// After\n\u003cdiv className=\"1st:col-span-4 2nd:col-span-3 col-span-1\"\u003e\u003c/div\u003e\n```\n\n\u003e To use the `nth-of-type` selector please use `1st-of`, `2nd-of`, `3rd-of`, ..., `10th-of`.\n\nYou can also use the `group-1st*` \u0026 `peer-1st*` modifiers. To add custom nths, see [here](#states).\n\n## Options\n\n### `nths`\n\nUse this option to override the default child selectors.\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  content: [],\n  theme: {\n    extend: {},\n  },\n  plugins: [\n    require(\"tailwindcss-shorthand\")({\n      // Default [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\n      nths: [11, 99],\n    }),\n  ],\n};\n```\n\n```html\n\u003cdiv class=\"11th:w-10\"\u003e\u003c/div\u003e\n\u003cdiv class=\"11th-of:w-10\"\u003e\u003c/div\u003e\n```\n\n### `states`\n\nUse this option to override the default states variants.\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  content: [],\n  theme: {\n    extend: {},\n  },\n  plugins: [\n    require(\"tailwindcss-shorthand\")({\n      // Default [\"open\", \"closed\", \"active\", \"inactive\", \"on\", \"off\", \"checked\", \"unchecked\", \"visible\", \"hidden\", \"expanded\", \"collapsed\", \"loading\", \"loaded\", \"selected\", \"success\", \"error\", \"enabled\", \"disabled\"]\n      states: [\"pending\"],\n    }),\n  ],\n};\n```\n\n```html\n\u003cdiv class=\"state-pending:w-10\"\u003e\u003c/div\u003e\n```\n\n### `separator`\n\nUse the `separator` option to override the default separator(`x`) in shorthand utilities.\n\n```javascript\n// tailwind.config.js\n\nmodule.exports = {\n  content: [],\n  theme: {\n    extend: {},\n  },\n  plugins: [\n    require(\"tailwindcss-shorthand\")({\n      // Default \"x\"\n      separator: \"-\",\n    }),\n  ],\n};\n```\n\n```html\n\u003cdiv class=\"a-5-10\"\u003e\u003c/div\u003e\n\u003cdiv class=\"a-[5rem-10rem]\"\u003e\u003c/div\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsudoaugustin%2Ftailwindcss-shorthand","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsudoaugustin%2Ftailwindcss-shorthand","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsudoaugustin%2Ftailwindcss-shorthand/lists"}