{"id":23131513,"url":"https://github.com/knovour/tailwindcss-shortcuts","last_synced_at":"2025-08-17T08:31:25.868Z","repository":{"id":35052379,"uuid":"200881301","full_name":"Knovour/tailwindcss-shortcuts","owner":"Knovour","description":"Use functions to generate tailwindcss class names.","archived":false,"fork":false,"pushed_at":"2023-01-07T08:29:07.000Z","size":890,"stargazers_count":8,"open_issues_count":14,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-05T03:51:10.627Z","etag":null,"topics":["classnames","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Knovour.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}},"created_at":"2019-08-06T15:47:16.000Z","updated_at":"2024-07-24T19:36:29.000Z","dependencies_parsed_at":"2023-01-15T13:01:11.239Z","dependency_job_id":null,"html_url":"https://github.com/Knovour/tailwindcss-shortcuts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Knovour/tailwindcss-shortcuts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Knovour%2Ftailwindcss-shortcuts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Knovour%2Ftailwindcss-shortcuts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Knovour%2Ftailwindcss-shortcuts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Knovour%2Ftailwindcss-shortcuts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Knovour","download_url":"https://codeload.github.com/Knovour/tailwindcss-shortcuts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Knovour%2Ftailwindcss-shortcuts/sbom","scorecard":{"id":79510,"data":{"date":"2025-08-11","repo":{"name":"github.com/Knovour/tailwindcss-shortcuts","commit":"5ef8719c0b967e3db64ae8204be5ba30af5f8afc"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.3,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Code-Review","score":0,"reason":"Found 0/18 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"56 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-15T05:29:57.191Z","repository_id":35052379,"created_at":"2025-08-15T05:29:57.191Z","updated_at":"2025-08-15T05:29:57.191Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270822927,"owners_count":24652019,"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-08-17T02:00:09.016Z","response_time":129,"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","tailwindcss"],"created_at":"2024-12-17T11:14:02.245Z","updated_at":"2025-08-17T08:31:25.577Z","avatar_url":"https://github.com/Knovour.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwindcss Shortcuts \u003c!-- omit in toc --\u003e\n\n[![NPM version](https://d25lcipzij17d.cloudfront.net/badge.svg?id=gh\u0026type=6\u0026v=0.4.1\u0026x2=0)](https://www.npmjs.com/package/tailwindcss-shortcuts)\n[![Node version](https://img.shields.io/badge/node-%3E=%2011.0.0-brightgreen.svg)]()\n\nUse functions to generate tailwindcss classes.\n\n```js\nsize(16) // w-16 h-16\nmargin(24, 32) // my-24 mx-32\n```\n## Install \u003c!-- omit in toc --\u003e\n\n```\nnpm i tailwind-shortcuts\n```\n\n# Functions \u003c!-- omit in toc --\u003e\n- [Backgrounds](#backgrounds)\n- [Borders](#borders)\n\t- [Border](#border)\n\t- [Border Width](#border-width)\n\t- [Rounded](#rounded)\n\t- [Rounded X](#rounded-x)\n\t- [Rounded Y](#rounded-y)\n- [Flexbox](#flexbox)\n\t- [Flex](#flex)\n\t- [Flex Item](#flex-item)\n- [Layout](#layout)\n\t- [Object](#object)\n\t- [Overflow](#overflow)\n\t- [Place](#place)\n\t- [Position](#position)\n- [Sizing](#sizing)\n\t- [Size](#size)\n\t- [Max Size](#max-size)\n\t- [Min Size](#min-size)\n- [Spacing](#spacing)\n\t- [Margin](#margin)\n\t- [Padding](#padding)\n- [Svg](#svg)\n- [Typo](#typo)\n\t- [Font](#font)\n\t- [List](#list)\n\t- [Text](#text)\n- [Prefix](#prefix)\n\t- [Screen](#screen)\n\t- [Breakpoints](#breakpoints)\n\t- [Dom Status](#dom-status)\n\t- [Nth-child](#nth-child)\n- [Extra](#extra)\n\t- [Custom](#custom)\n\t- [Reset](#reset)\n\n## Backgrounds\n\n```typescript\nbg(...attributes)\n```\n\nTailwind classes\n- [Background Attachment](https://tailwindcss.com/docs/background-attachment)\n- [Background Color](https://tailwindcss.com/docs/background-color)\n- [Background Position](https://tailwindcss.com/docs/background-position)\n- [Background Repeat](https://tailwindcss.com/docs/background-repeat)\n- [Background Size](https://tailwindcss.com/docs/background-size)\n\n\n```js\nimport { bg } from 'tailwind-shortcuts'\n\n// Or\nimport bg from 'tailwind-shortcuts/bg'\n\nbg('repeat', 'cover', 'fixed')\n// Become: 'bg-repeat bg-cover bg-fixed'\n```\n\n**Class alias: `full-cover`**\n```js\nbg('full-cover') // Become: bg-cover bg-no-repeat bg-center\n```\n\n## Borders\n\n### Border\n\n```typescript\nborder(width: (string | number)[], style?: string, color?: string)\n```\n\nCheck [Border Width](#border-width) for more info.\n\nTailwind Classes\n- [Border Color](https://tailwindcss.com/docs/border-color)\n- [Border Style](https://tailwindcss.com/docs/border-style)\n- [Border Width](https://tailwindcss.com/docs/border-width)\n\n```js\nimport { border } from 'tailwind-shortcuts'\n\n// Or\nimport { border } from 'tailwind-shortcuts/border'\n\nborder()\n// Become: 'border'\n\nborder('default', 'solid', 'black')\n// Become: 'border border-solid border-black'\n\nborder(1, 'solid', 'black')\n// Become: 'border-1 border-solid border-black'\n\nborder([1, 2], 'solid', 'black')\n// Become: 'border-t-1 border-r-2 border-b-1 border-l-2 border-solid border-black'\n```\n\n### Border Width\n\n```typescript\nborder(top, right, bottom, left)\n```\nSimliar to `border-width` css\n\nTailwind Classes\n- [Border Width](https://tailwindcss.com/docs/border-width)\n\n```js\nimport { borderWidth } from 'tailwind-shortcuts'\n\n// Or\nimport { borderWidth } from 'tailwind-shortcuts/border'\n\nborderWidth()\n// Become: 'border'\n\nborderWidth(1)\n// Become: 'border-1'\n// border-width: 1px;\n\nborderWidth(1, 2)\n// Become: 'border-t-1 border-r-2 border-b-1 border-l-2'\n// border-width: 1px 2px;\n\nborderWidth(1, 2, 3)\n// Become: 'border-t-1 border-r-2 border-b-3 border-l-2'\n// border-width: 1px 2px 3px;\n\nborderWidth(1, 2, 3, 4)\n// Become: 'border-t-1 border-r-2 border-b-3 border-l-4'\n// border-width: 1px 2px 3px 4px;\n```\n\n### Rounded\n\n```typescript\nrounded(topLeft, topRight, bottomRight, bottomLeft)\n```\nSimliar to `border-radius` css\n\nTailwind Classes\n- [Border Radius](https://tailwindcss.com/docs/border-radius)\n\n\n```js\nimport { rounded } from 'tailwind-shortcuts'\n\n// Or\nimport { rounded } from 'tailwind-shortcuts/rounded'\n\nrounded()\n// Become: 'rounded'\n\nrounded(1)\n// Become: 'rounded-1'\n// border-radius: 1px;\n\nrounded(1, 2)\n// Become: 'rounded-tl-1 rounded-tr-2 rounded-br-1 rounded-bl-2'\n// border-radius: 1px 2px;\n\nrounded(1, 2, 3)\n// Become: 'rounded-tl-1 rounded-tr-2 rounded-br-3 rounded-bl-2'\n// border-radius: 1px 2px 3px;\n\nrounded(1, 2, 3, 4)\n// Become: 'rounded-tl-1 rounded-tr-2 rounded-br-3 rounded-bl-4'\n// border-radius: 1px 2px 3px 4px;\n```\n\n### Rounded X\n```typescript\nroundedY(top, bottom)\n```\n\nTailwind Classes\n- [Border Radius](https://tailwindcss.com/docs/border-radius)\n\n```js\nimport { roundedY } from 'tailwind-shortcuts'\n\n// Or\nimport { roundedX } from 'tailwind-shortcuts/rounded'\n\nroundedX()\n// Become: 'rounded-r rounded-l'\n\nroundedX(1)\n// Become: 'rounded-r-1 rounded-l-1'\n// border-radius: 1px;\n\nroundedX(1, 2)\n// Become: 'rounded-r-1 rounded-l-2'\n// border-radius: 2px 1px 1px 2px;\n```\n\n### Rounded Y\n```typescript\nroundedY(left, right)\n```\n\nTailwind Classes\n- [Border Radius](https://tailwindcss.com/docs/border-radius)\n\n```js\nimport { roundedY } from 'tailwind-shortcuts'\n\n// Or\nimport { roundedY } from 'tailwind-shortcuts/rounded'\n\nroundedY()\n// Become: 'rounded-t rounded-b'\n\nrounded(1)\n// Become: 'rounded-t-t rounded-b-1'\n// border-radius: 1px;\n\nrounded(1, 2)\n// Become: 'rounded-t-1 rounded-b-2'\n// border-radius: 1px 1px 2px 2px;\n```\n\n## Flexbox\n\n### Flex\n```typescript\nflex(...attributes)\n```\nAttributes: `inline`, `row`, `row-reverse`, `col`, `col-reverse`, `no-wrap`, `wrap`, `wrap-reverse`, `middle`\n\n\nTailwind Classes\n- [Flex Direction](https://tailwindcss.com/docs/flex-direction)\n- [Flex Wrap](https://tailwindcss.com/docs/flex-wrap)\n\n```js\nimport { flex } from 'tailwind-shortcuts'\n\n// Or\nimport { flex } from 'tailwind-shortcuts/flexbox'\n\nflex()\n// Become: 'flex'\n\nflex('inline')\n// Become: 'inline-flex'\n\nflex('col', 'wrap')\n// Become: 'flex-col flex-wrap'\n```\n\n**Special keyword: `middle`**\n\n```js\nflex('middle')\n// Become: 'justify-center items-center'\n```\n\n### Flex Item\n\n```typescript\nflexItem(...attributes)\n```\nAttributes: `initial`, `1`, `auto`, `none`, `grow`, `grow-0`, `shrink`, `shrink-0`\n\nTailwind Classes\n- [Flex](https://tailwindcss.com/docs/flex)\n- [Flex Grow](https://tailwindcss.com/docs/flex-grow)\n- [Flex Shrink](https://tailwindcss.com/docs/flex-shrink)\n\n```js\nimport { flexItem } from 'tailwind-shortcuts'\n\n// Or\nimport { flexItem } from 'tailwind-shortcuts/flexbox'\n\nflexItem('grow', 'shrink-0')\n// Become: 'flex-grow flex-shrink-0'\n```\n\n## Layout\n\n### Object\n```typescript\nobject(...attributes)\n```\n\nTailwind Classes\n- [Object Fit](https://tailwindcss.com/docs/object-fit)\n- [Object Position](https://tailwindcss.com/docs/object-fit)\n\n```js\nimport { object } from 'tailwind-shortcuts'\n\n// Or\nimport { object } from 'tailwind-shortcuts/layout'\n\nobject('cover', 'center')\n// Become: 'object-cover object-center'\n```\n\n### Overflow\n```typescript\noverflow(y, x)\n```\n\nTailwind Classes\n- [Overflow](https://tailwindcss.com/docs/overflow)\n\n```js\nimport { overflow } from 'tailwind-shortcuts'\n\n// Or\nimport { overflow } from 'tailwind-shortcuts/layout'\n\noverflow('scroll')\n// Become: 'overflow-scroll'\n\noverflow('hidden', 'auto')\n// Become: 'overflow-y-hidden overflow-x-auto'\n```\n\n### Place\n```typescript\nplace(top, right, bottom, left)\n```\n\nTailwind Classes\n- [Top / Right / Bottom / Left](https://tailwindcss.com/docs/top-right-bottop-left)\n\n```js\nimport { place } from 'tailwind-shortcuts'\n\n// Or\nimport { place } from 'tailwind-shortcuts/layout'\n\nplace(0)\n// Become: 'inset-0'\n\nplace(0, 1)\n// Become: 'inset-y-0 inset-x-1'\n\nplace(0, 1, 2)\n// Become: 'top-0 inset-x-1 bottom-2'\n\nplace(0, 1, 2, 3)\n// Become: 'top-0 right-1 bottom-2 left-3'\n\nplace(0, -1, 2, -3)\n// Become: 'top-0 -right-1 bottom-2 -left-3'\n```\n\n### Position\n\nSame usage as [Place](#place)\n\n```typescript\nabsolute(top, right, bottom, left)\nrelative(top, right, bottom, left)\nfixed(top, right, bottom, left)\nsticky(top, right, bottom, left)\n```\n\nTailwind Classes\n- [Top / Right / Bottom / Left](https://tailwindcss.com/docs/top-right-bottop-left)\n\n```js\nimport { absolute, relative, fixed, sticky } from 'tailwind-shortcuts'\n\n// Or\nimport { absolute, relative, fixed, sticky } from 'tailwind-shortcuts/layout'\n\nabsolute('auto')\n// Become: 'absolute inset-auto'\n\nrelative(0)\n// Become: 'relative inset-0'\n\nfixed(0, 1)\n// Become: 'fixed inset-y-0 inset-x-1'\n\nsticky(0, 1, 2)\n// Become: 'sticky top-0 inset-x-1 bottom-2'\n```\n\n## Sizing\n\n### Size\n```typescript\nsize(width, height = width)\n```\n\nTailwind Classes\n- [Width](https://tailwindcss.com/docs/width)\n- [Height](https://tailwindcss.com/docs/height)\n\n```js\nimport { size } from 'tailwind-shortcuts'\n\n// Or\nimport { size } from 'tailwind-shortcuts/sizing'\n\nsize(0)\n// Become: 'w-0 h-0'\n\nsize(24, 32)\n// Become: 'w-24 h-32'\n\nsize(24, '')\n// Become: 'w-24'\n```\n\n### Max Size\n```typescript\nmaxSize(width, height = width)\n```\n\nTailwind Classes\n- [Max Width](https://tailwindcss.com/docs/max-width)\n- [Max Height](https://tailwindcss.com/docs/max-height)\n\n```js\nimport { maxSize } from 'tailwind-shortcuts'\n\n// Or\nimport { maxSize } from 'tailwind-shortcuts/sizing'\n\nmaxSize(0)\n// Become: 'max-w-0 max-h-0'\n\nmaxSize(24, 32)\n// Become: 'max-w-24 max-h-32'\n```\n\n### Min Size\n```typescript\nminSize(width, height = width)\n```\n\nTailwind Classes\n- [Min Width](https://tailwindcss.com/docs/min-width)\n- [Min Height](https://tailwindcss.com/docs/min-height)\n\n```js\nimport { minSize } from 'tailwind-shortcuts'\n\n// Or\nimport { minSize } from 'tailwind-shortcuts/sizing'\n\nminSize(0)\n// Become: 'min-w-0 min-h-0'\n\nminSize(24, 32)\n// Become: 'min-w-24 min-h-32'\n```\n\n## Spacing\n\n### Margin\n```typescript\nmargin(top, right, bottom, left)\n```\n\nTailwind Classes\n- [Margin](https://tailwindcss.com/docs/margin)\n\n```js\nimport { margin } from 'tailwind-shortcuts'\n\n// Or\nimport { margin } from 'tailwind-shortcuts/spacing'\n\nmargin(0)\n// Become: 'm-0'\n\nmargin(1, 2)\n// Become: 'my-1 mx-2'\n\nmargin(1, 2, 3)\n// Become: 'mt-1 mx-2 mb-3'\n\nmargin(1, 2, 3, 4)\n// Become: 'mt-1 mr-2 mb-3 ml-4'\n\nmargin(1, -2, 3, -4)\n// Become: 'mt-1 -mr-2 mb-3 -ml-4'\n```\n\n### Padding\n```typescript\npadding(top, right, bottom, left)\n```\n\nTailwind Classes\n- [Padding](https://tailwindcss.com/docs/padding)\n\n```js\nimport { padding } from 'tailwind-shortcuts'\n\n// Or\nimport { padding } from 'tailwind-shortcuts/spacing'\n\npadding(0)\n// Become: 'p-0'\n\npadding(1, 2)\n// Become: 'py-1 px-2'\n\npadding(1, 2, 3)\n// Become: 'pt-1 px-2 pb-3'\n\npadding(1, 2, 3, 4)\n// Become: 'pt-1 pr-2 pb-3 pl-4'\n```\n\n## Svg\n```typescript\nsvg(...attributes)\n```\nAttributes: `fill`, `stroke`\n\nTailwind Classes\n- [Fill](https://tailwindcss.com/docs/fill)\n- [Stroke](https://tailwindcss.com/docs/stroke)\n\n```js\nimport { svg } from 'tailwind-shortcuts'\n\n// Or\nimport { svg } from 'tailwind-shortcuts/svg'\n\nsvg('fill')\n// Become: 'fill-current'\n\nsvg('fill', 'stroke')\n// Become: 'fill-current stroke-current'\n```\n\n## Typo\n\n### Font\n```typescript\nfont(...attributes)\n```\n\nTailwind Classes\n- [Font Family](https://tailwindcss.com/docs/font-family)\n- [Font Smoothing](https://tailwindcss.com/docs/font-smoothing)\n- [Font Style](https://tailwindcss.com/docs/font-style)\n- [Font Weight](https://tailwindcss.com/docs/font-weight)\n\n```js\nimport { font } from 'tailwind-shortcuts'\n\n// Or\nimport { font } from 'tailwind-shortcuts/typo'\n\nfont('sans', 'bold')\n// Become: 'font-sans font-bold'\n```\n\n**Special keyword: `smooth`, `i`**\n\n```js\nfont('smooth')\n// Become: 'antialiased'\n\nfont('i')\n// Become: 'italic'\n```\n\n### List\n```typescript\nlist(...attributes)\n```\n\nTailwind Classes\n- [List Style Type](https://tailwindcss.com/docs/list-style-type)\n- [List Style Position](https://tailwindcss.com/docs/list-style-position)\n\n```js\nimport { list } from 'tailwind-shortcuts'\n\n// Or\nimport { list } from 'tailwind-shortcuts/typo'\n\nlist('decimal', 'inside')\n// Become: 'list-decimal list-inside'\n```\n\n### Text\n```typescript\ntext(...attributes)\n```\n\nTailwind Classes\n- [Font Size](https://tailwindcss.com/docs/font-size)\n- [Text Align](https://tailwindcss.com/docs/text-align)\n- [Text Color](https://tailwindcss.com/docs/text-color)\n- [Text Transform](https://tailwindcss.com/docs/text-transform)\n\n```js\nimport { text } from 'tailwind-shortcuts'\n\n// Or\nimport { text } from 'tailwind-shortcuts/typo'\n\ntext('xl', 'center', 'black')\n// Become: 'text-xl text-center text-black'\n```\n\n**Special keyword: `upper`, `lower`, `cap`**\n\n```js\ntext('upper')\n// Become: 'uppercase'\n\ntext('lower')\n// Become: 'lowercase'\n\ntext('cap')\n// Become: 'capitalize'\n```\n\n## Prefix\n\n### Screen\n\n```typescript\nscreen(breakpoint, ...classes)\n\n// Currying\nscreen(breakpoint)(...classes)\n```\n\nTailwind Classes\n- [Breakpoints](https://tailwindcss.com/docs/breakpoints)\n\n\n```js\nimport { screen } from 'tailwind-shortcuts'\n\n// Or\nimport { screen } from 'tailwind-shortcuts/prefix'\n\nscreen('md', 'w-320', 'mx-16', 'text-xl')\n// Become: 'md:w-320 md:mx-16 md:text-xl'\n\n// Currying\nconst md = screen('md')\nmd('w-320', 'mx-16', 'text-xl')\n// Become: 'md:w-320 md:mx-16 md:text-xl'\n```\n\n### Breakpoints\n\n```typescript\nbreakpoints(breakpointObject, ...classes)\n```\n\nTailwind Classes\n- [Breakpoints](https://tailwindcss.com/docs/breakpoints)\n\n\n```js\nimport { breakpoints } from 'tailwind-shortcuts'\n\n// Or\nimport { breakpoints } from 'tailwind-shortcuts/prefix'\n\nbreakpoints({\n\tmd: 'w-320 mx-16 text-xl'\n\tlg: 'w-640 mx-32 text-2xl'\n})\n// Become: 'md:w-320 md:mx-16 md:text-xl lg:w-640 lg:mx-32 lg:text-2xl'\n```\n\n### Dom Status\n```typescript\nstatus(variant, ...classes)\n\n// Currying\nstatus(variant)(...classes)\n```\nVariants: 'hover', 'focus', 'active', 'group-hover', 'focus-within', 'disabled', 'visited'\n\nTailwind Classes\n- [Configuring Variants](https://tailwindcss.com/docs/configuring-variants)\n\n```js\nimport { status } from 'tailwind-shortcuts'\n\n// Or\nimport { status } from 'tailwind-shortcuts/prefix'\n\nstatus('hover', 'w-320', 'mx-16', 'text-xl')\n// Become: 'hover:w-320 hover:mx-16 hover:text-xl'\n\n// Currying\nconst hover = status('hover')\nhover('w-320', 'mx-16', 'text-xl')\n// Become: 'hover:w-320 hover:mx-16 hover:text-xl'\n```\n\n### Nth-child\n```typescript\nchild(variant, ...classes)\n\n// Currying\nchild(variant)(...classes)\n```\nVariants: 'first', 'last', 'odd', 'even'\n\nTailwind Classes\n- [Configuring Variants](https://tailwindcss.com/docs/configuring-variants)\n\n```js\nimport { child } from 'tailwind-shortcuts'\n\n// Or\nimport { child } from 'tailwind-shortcuts/prefix'\n\nchild('first', 'w-320', 'mx-16', 'text-xl')\n// Become: 'first:w-320 first:mx-16 first:text-xl'\n\n// Currying\nconst first = child('first')\nfirst('w-320', 'mx-16', 'text-xl')\n// Become: 'first:w-320 first:mx-16 first:text-xl'\n```\n\n## Extra\n\n### Custom\n\nGenerate classes from plugins\n\n```typescript\ncustom(name, ...attributes)\n\n// Currying\ncustom(name)(...attributes)\n```\n\n```js\nimport { custom } from 'tailwind-shortcuts'\n\n// Or\nimport { custom } from 'tailwind-shortcuts/extra'\n\ncustom('transition', 'all', 100, 'ease')\n// Become: 'transition-all transition-100 transition-ease'\n\n// Currying\nconst transition = custom('transition')\ntransition('all', 100, 'ease')\n// Become: 'transition-all transition-100 transition-ease'\n```\n\n### Reset\n\nAdd some reset classes you might need it\n\n```typescript\nreset(domName)\n```\nDom Name: `a`, `input`, `button`\n\n```js\nimport { reset } from 'tailwind-shortcuts'\n\n// Or\nimport { reset } from 'tailwind-shortcuts/extra'\n\nreset('a')\n// Become: 'outline-none no-underline'\n\nreset('input')\n// Become: 'outline-none'\n\nreset('button')\n// Become: 'focus:outline-none'\n```\n\n# Usage \u003c!-- omit in toc --\u003e\n\n## JSX \u003c!-- omit in toc --\u003e\n\n```jsx\n\u003cdiv className={`size(16) m-24`}\u003e\u003c/div\u003e\n```\n\n## With [classnames](https://github.com/JedWatson/classnames?ts=2) \u003c!-- omit in toc --\u003e\n\n```js\nclassnames(\n\t`absolute ${place-0}`,\n\t{\n\t\t[`${margin(0, 16)}`]: true\n\t}\n)\n```\n\n## Add Prefix  \u003c!-- omit in toc --\u003e\n\n```js\nconst xl = screen('xl')\nconst hover = status('hover')\nxl(hover('mx-3', rounded(1), size(40)))\n\n// Become: 'xl:hover:mx-3 xl:hover:rounded-1 xl:hover:w-40 xl:hover:h-40'\n```\n\n# License \u003c!-- omit in toc --\u003e\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknovour%2Ftailwindcss-shortcuts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fknovour%2Ftailwindcss-shortcuts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknovour%2Ftailwindcss-shortcuts/lists"}