{"id":15664731,"url":"https://github.com/ixkaito/tailwindcss-fluid-spacing","last_synced_at":"2025-07-27T03:08:46.553Z","repository":{"id":65514190,"uuid":"381952123","full_name":"ixkaito/tailwindcss-fluid-spacing","owner":"ixkaito","description":"A Tailwind CSS plugin that provides fluid-responsive spacings across viewport widths.","archived":false,"fork":false,"pushed_at":"2021-07-12T12:52:14.000Z","size":20,"stargazers_count":17,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-19T12:14:09.030Z","etag":null,"topics":["clamp","dynamic","fluid","gap","height","margin","max","min","padding","plugin","responsive","space","spacing","tailwind","tailwindcss","translate","viewport","vw","width"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ixkaito.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}},"created_at":"2021-07-01T07:48:01.000Z","updated_at":"2024-05-20T02:55:51.000Z","dependencies_parsed_at":"2023-01-26T21:01:23.478Z","dependency_job_id":null,"html_url":"https://github.com/ixkaito/tailwindcss-fluid-spacing","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ixkaito%2Ftailwindcss-fluid-spacing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ixkaito%2Ftailwindcss-fluid-spacing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ixkaito%2Ftailwindcss-fluid-spacing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ixkaito%2Ftailwindcss-fluid-spacing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ixkaito","download_url":"https://codeload.github.com/ixkaito/tailwindcss-fluid-spacing/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252596375,"owners_count":21773844,"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":["clamp","dynamic","fluid","gap","height","margin","max","min","padding","plugin","responsive","space","spacing","tailwind","tailwindcss","translate","viewport","vw","width"],"created_at":"2024-10-03T13:43:59.807Z","updated_at":"2025-05-05T23:52:23.981Z","avatar_url":"https://github.com/ixkaito.png","language":"JavaScript","readme":"# tailwindcss-fluid-spacing\n\nA Tailwind CSS plugin that provides fluid-responsive spacings across viewport widths.\n\n## Installation\n\nInstall the plugin from npm:\n\n```sh\nnpm install -D tailwindcss-fluid-spacing\n```\nor\n```sh\nyarn add -D tailwindcss-fluid-spacing\n```\n\nThen add the plugin to your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('tailwindcss-fluid-spacing'),\n    // ...\n  ],\n}\n```\n\n## Usage\n\n### Basic\n\nFluid-spacing is inherited by the `padding`, `margin`, `width`, `height`, `maxHeight`, `gap`, `inset`, `space` and `translate` core plugins. Insert `vw-` before `{size}` to each utilities.\n\nExamples:\n\n```html\n\u003cdiv class=\"p-vw-8\"\u003e...\u003c/div\u003e \u003c!-- padding: 2.5vw; --\u003e\n\u003cdiv class=\"mx-vw-16\"\u003e...\u003c/div\u003e \u003c!-- margin-left: 5vw; margin-right: 5vw; --\u003e\n\u003cdiv class=\"-mt-vw-16\"\u003e...\u003c/div\u003e \u003c!-- margin-top: -5vw; --\u003e\n\u003cdiv class=\"w-vw-64\"\u003e...\u003c/div\u003e \u003c!-- width: 20vw; --\u003e\n\u003cdiv class=\"h-vw-32\"\u003e...\u003c/div\u003e \u003c!-- height: 10vw; --\u003e\n\u003cdiv class=\"gap-vw-10\"\u003e...\u003c/div\u003e \u003c!-- gap: 3.125vw; --\u003e\n\u003cdiv class=\"top-vw-24\"\u003e...\u003c/div\u003e \u003c!-- top: 7.5vw; --\u003e\n\u003cdiv class=\"inset-vw-4\"\u003e...\u003c/div\u003e \u003c!-- top: 1.25vw; right: 1.25vw; bottom: 1.25vw; left: 1.25vw; --\u003e\n\u003cdiv class=\"translate-y-vw-12\"\u003e...\u003c/div\u003e \u003c!-- --tw-translate-y: 3.75vw; transform: var(--tw-transform); --\u003e\n```\n\n### Responsive\n\nTo control the fluid-spacing at a specific breakpoint, add a `{screen}:` prefix to any existing utility. For example, adding the class `md:p-vw-8` to an element would apply the `p-vw-8` utility at medium screen sizes and above.\n\n```html\n\u003cdiv class=\"md:p-vw-8\"\u003e...\u003c/div\u003e\n```\n\nTo provide a minimum or a maximum value, add a `-{min|max}@{screen}` suffix to any existing utility; to privide both minmun and maximum values, add a `-min@{screen}-max@{screen}` suffix. For example, the class `mt-vw-16-min@sm` would provide the `5vw` value with the minmum value `2rem (32px)` which equals `5vw` at the small screen.\n\n```html\n\u003cdiv class=\"mt-vw-16-min@sm\"\u003e...\u003c/div\u003e \u003c!-- margin-top: max(5vw, 2rem); --\u003e\n\u003cdiv class=\"mt-vw-16-max@xl\"\u003e...\u003c/div\u003e \u003c!-- margin-top: min(5vw, 4rem); --\u003e\n\u003cdiv class=\"mt-vw-16-min@sm-max@xl\"\u003e...\u003c/div\u003e \u003c!-- margin-top: clamp( 2rem, 5vw, 4rem ); --\u003e\n```\n\nThe `-{min|max}@{screen}` and `-min@{screnn}-max@{screen}` suffixes are also available for any breakpoint.\n\n```html\n\u003cdiv class=\"my-10 sm:my-vw-20-max@xl\"\u003e...\u003c/div\u003e\n```\n\n## Default fluid-spacing\n\n| Size | Value       | 320px   | sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px |\n| ---- | ----------- | ------- | --------- | --------- | ---------- | ---------- | ----------- |\n| 1    | `0.3125vw`  | `1px`   | `2px`     | `2.4px`   | `3.2px`    | `4px`      | `4.8px`     |\n| 1.5  | `0.46875vw` | `1.5px` | `3px`     | `3.6px`   | `4.8px`    | `6px`      | `7.2px`     |\n| 2    | `0.625vw`   | `2px`   | `4px`     | `4.8px`   | `6.4px`    | `8px`      | `9.6px`     |\n| 2.5  | `0.78125vw` | `2.5px` | `5px`     | `6px`     | `8px`      | `10px`     | `12px`      |\n| 3    | `0.9375vw`  | `3px`   | `6px`     | `7.2px`   | `9.6px`    | `12px`     | `14.4px`    |\n| 3.5  | `1.09375vw` | `3.5px` | `7px`     | `8.4px`   | `11.2px`   | `14px`     | `16.8px`    |\n| 4    | `1.25vw`    | `4px`   | `8px`     | `9.6px`   | `12.8px`   | `16px`     | `19.2px`    |\n| 5    | `1.5625vw`  | `5px`   | `10px`    | `12px`    | `16px`     | `20px`     | `24px`      |\n| 6    | `1.875vw`   | `6px`   | `12px`    | `14.4px`  | `19.2px`   | `24px`     | `28.8px`    |\n| 7    | `2.1875vw`  | `7px`   | `14px`    | `16.8px`  | `22.4px`   | `28px`     | `33.6px`    |\n| 8    | `2.5vw`     | `8px`   | `16px`    | `19.2px`  | `25.6px`   | `32px`     | `38.4px`    |\n| 9    | `2.8125vw`  | `9px`   | `18px`    | `21.6px`  | `28.8px`   | `36px`     | `43.2px`    |\n| 10   | `3.125vw`   | `10px`  | `20px`    | `24px`    | `32px`     | `40px`     | `48px`      |\n| 11   | `3.4375vw`  | `11px`  | `22px`    | `26.4px`  | `35.2px`   | `44px`     | `52.8px`    |\n| 12   | `3.75vw`    | `12px`  | `24px`    | `28.8px`  | `38.4px`   | `48px`     | `57.6px`    |\n| 14   | `4.375vw`   | `14px`  | `28px`    | `33.6px`  | `44.8px`   | `56px`     | `67.2px`    |\n| 16   | `5vw`       | `16px`  | `32px`    | `38.4px`  | `51.2px`   | `64px`     | `76.8px`    |\n| 20   | `6.25vw`    | `20px`  | `40px`    | `48px`    | `64px`     | `80px`     | `96px`      |\n| 24   | `7.5vw`     | `24px`  | `48px`    | `57.6px`  | `76.8px`   | `96px`     | `115.2px`   |\n| 28   | `8.75vw`    | `28px`  | `56px`    | `67.2px`  | `89.6px`   | `112px`    | `134.4px`   |\n| 32   | `10vw`      | `32px`  | `64px`    | `76.8px`  | `102.4px`  | `128px`    | `153.6px`   |\n| 36   | `11.25vw`   | `36px`  | `72px`    | `86.4px`  | `115.2px`  | `144px`    | `172.8px`   |\n| 40   | `12.5vw`    | `40px`  | `80px`    | `96px`    | `128px`    | `160px`    | `192px`     |\n| 44   | `13.75vw`   | `44px`  | `88px`    | `105.6px` | `140.8px`  | `176px`    | `211.2px`   |\n| 48   | `15vw`      | `48px`  | `96px`    | `115.2px` | `153.6px`  | `192px`    | `230.4px`   |\n| 52   | `16.25vw`   | `52px`  | `104px`   | `124.8px` | `166.4px`  | `208px`    | `249.6px`   |\n| 56   | `17.5vw`    | `56px`  | `112px`   | `134.4px` | `179.2px`  | `224px`    | `268.8px`   |\n| 60   | `18.75vw`   | `60px`  | `120px`   | `144px`   | `192px`    | `240px`    | `288px`     |\n| 64   | `20vw`      | `64px`  | `128px`   | `153.6px` | `204.8px`  | `256px`    | `307.2px`   |\n| 72   | `22.5vw`    | `72px`  | `144px`   | `172.8px` | `230.4px`  | `288px`    | `345.6px`   |\n| 80   | `25vw`      | `80px`  | `160px`   | `192px`   | `256px`    | `320px`    | `384px`     |\n| 96   | `30vw`      | `96px`  | `192px`   | `230.4px` | `307.2px`  | `384px`    | `460.8px`   |\n\n## Configuration options\n\nYou can invoke the plugin passing along options when registering it in `plugins` configuration.\n\n### Customize the default setting\n\nUse the `sizes` key to customize the default setting.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('tailwindcss-fluid-spacing')({\n      sizes: [16, 20, 24],\n    }),\n    // ...\n  ],\n}\n```\n\nThis will only use `16`, `20` and `24` as the `{size}` to generate classes like `p-vw-16`, `m-vw-20`, `w-vw-24`, etc.\n\n### Extend the default setting\n\nTo extend the default setting, put the `sizes` key in `extend` section.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('tailwindcss-fluid-spacing')({\n      extend: {\n        sizes: [68, 76],\n      },\n    }),\n    // ...\n  ],\n}\n```\n\nThis will generate classes like `p-vw-68` and `m-vw-76` in addition to all of the default fluid-spacing utilities.\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fixkaito%2Ftailwindcss-fluid-spacing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fixkaito%2Ftailwindcss-fluid-spacing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fixkaito%2Ftailwindcss-fluid-spacing/lists"}