{"id":13480388,"url":"https://github.com/n1kk/tailwindcss-spaced-items","last_synced_at":"2025-04-14T00:54:33.168Z","repository":{"id":143933570,"uuid":"155990911","full_name":"n1kk/tailwindcss-spaced-items","owner":"n1kk","description":"TailwindCSS plugin to generate classes for setting fixed space between containers child elements.","archived":false,"fork":false,"pushed_at":"2020-03-16T23:00:53.000Z","size":7,"stargazers_count":15,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-22T21:02:14.958Z","etag":null,"topics":[],"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/n1kk.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}},"created_at":"2018-11-03T14:29:47.000Z","updated_at":"2022-04-21T22:14:44.000Z","dependencies_parsed_at":"2024-01-15T20:47:38.856Z","dependency_job_id":"b4248780-9988-4feb-b6e9-9a36a8415bca","html_url":"https://github.com/n1kk/tailwindcss-spaced-items","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n1kk%2Ftailwindcss-spaced-items","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n1kk%2Ftailwindcss-spaced-items/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n1kk%2Ftailwindcss-spaced-items/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n1kk%2Ftailwindcss-spaced-items/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/n1kk","download_url":"https://codeload.github.com/n1kk/tailwindcss-spaced-items/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248804783,"owners_count":21164131,"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":[],"created_at":"2024-07-31T17:00:38.414Z","updated_at":"2025-04-14T00:54:33.131Z","avatar_url":"https://github.com/n1kk.png","language":"JavaScript","readme":"This plugin generates a set of css classes to add fixed margins to container children, except last one, to spread content in a consistent manner.\n\nThis can be useful when you want to spread items in the container with a set interval but don't want to add margins to every child manually and remove it from last child to make separation look proper. \n\n## Install\nyarn\n```bash\nyarn add tailwindcss-spaced-items\n```\nnpm\n```bash\nnpm i tailwindcss-spaced-items\n```\n\n## API\n\n#### `spacedItems({ values, children = ['*']} = {})`\n\n- _`values`_: [optional] an object with values to generate classes, defaults to configs 'margin' object values. If config does not contain margin values you have to pass your own values for classes to be generated.\n- _`children`_: [optional] array of selectors of which child tags should be affected, defaults to `['*']`\n\n## Usage\nIn tailwind config\n```javascript\nconst spacedItems = require('tailwindcss-spaced-items')\nmodule.exports = {\n  plugins: [\n    spacedItems(),\n  ],\n}\n```\nThis will produce css like this for each value in configs `margin` object:\n```css\n.spaced-x-1 \u003e * { margin-right: .25rem; }\n.spaced-x-1 \u003e *:last-child { margin-right: 0; }\n.spaced-y-1 \u003e * { margin-bottom: .25rem; }\n.spaced-y-1 \u003e *:last-child { margin-bottom: 0; }\n.spaced-xy-1 \u003e * { margin-bottom: .25rem;\n                   margin-right: .25rem; }\n.spaced-xy-1 \u003e *:last-child { margin-bottom: 0;\n                              margin-right: 0; }\n\n/* ... */\n\n```\nTo override values:\n```javascript\nconst spacedItems = require('tailwindcss-spaced-items')\nmodule.exports = {\n  plugins: [\n    spacedItems({\n      values: {\n        '1': '1px',\n        '5': '5px',\n        '10': '10px',\n        '20': '20px',\n      },\n    }),\n  ],\n}\n```\nThis will produce:\n```css\n.spaced-x-1 \u003e * { margin-right: 1px; }\n.spaced-x-1 \u003e *:last-child { margin-right: 0; }\n\n/* ... */\n\n```\nTo define a child tag:\n```javascript\nconst spacedItems = require('tailwindcss-spaced-items')\nmodule.exports = {\n  plugins: [\n    spacedItems({\n      children: ['div', 'p'],\n    }),\n  ],\n}\n```\nThis will produce:\n```css\n.spaced-x-1 \u003e div, \n.spaced-x-1 \u003e p {\n  margin-right: .25rem; \n}\n.spaced-x-1 \u003e div:last-child, \n.spaced-x-1 \u003e p:last-child \n{ \n  margin-right: 0; \n}\n\n/* ... */\n```\n","funding_links":[],"categories":["Plugins","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fn1kk%2Ftailwindcss-spaced-items","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fn1kk%2Ftailwindcss-spaced-items","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fn1kk%2Ftailwindcss-spaced-items/lists"}