{"id":14962249,"url":"https://github.com/lukewarlow/tailwind-scrollbar-utilities","last_synced_at":"2025-04-07T16:18:19.773Z","repository":{"id":153047409,"uuid":"627968201","full_name":"lukewarlow/tailwind-scrollbar-utilities","owner":"lukewarlow","description":"Tailwind v4 plugin to create classes for the scrollbar-gutter, scrollbar-width and scrollbar-color CSS properties.","archived":false,"fork":false,"pushed_at":"2025-02-13T00:07:54.000Z","size":121,"stargazers_count":33,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-31T13:17:24.137Z","etag":null,"topics":["css","css-scrollbar","hacktoberfest","scrollbar","scrollbar-color","scrollbar-gutter","scrollbar-width","scrollbars","tailwind","tailwindcss","utilties"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/tailwind-scrollbar-utilities","language":"CSS","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/lukewarlow.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-14T15:45:03.000Z","updated_at":"2025-03-04T18:55:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"de062071-24b0-40f9-8f2a-d70fd7c87726","html_url":"https://github.com/lukewarlow/tailwind-scrollbar-utilities","commit_stats":{"total_commits":5,"total_committers":2,"mean_commits":2.5,"dds":0.4,"last_synced_commit":"eab21f95b5514f38d33729a4de3d66bfd0bf3b03"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukewarlow%2Ftailwind-scrollbar-utilities","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukewarlow%2Ftailwind-scrollbar-utilities/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukewarlow%2Ftailwind-scrollbar-utilities/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukewarlow%2Ftailwind-scrollbar-utilities/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukewarlow","download_url":"https://codeload.github.com/lukewarlow/tailwind-scrollbar-utilities/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247685628,"owners_count":20979085,"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":["css","css-scrollbar","hacktoberfest","scrollbar","scrollbar-color","scrollbar-gutter","scrollbar-width","scrollbars","tailwind","tailwindcss","utilties"],"created_at":"2024-09-24T13:29:46.660Z","updated_at":"2025-04-07T16:18:19.748Z","avatar_url":"https://github.com/lukewarlow.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TailwindCSS Scrollbar Utilities Plugin\n\n[![npm](https://img.shields.io/npm/v/tailwind-scrollbar-utilities.svg?style=flat-square)](https://www.npmjs.com/package/tailwind-scrollbar-utilities)\n\nThis plugin generates utility classes for [`scrollbar-gutter`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter), \n[`scrollbar-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width), \nand [`scrollbar-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color).\n\n## Installation\n\nAdd to your project via:\n\n```bash\n# Install using npm\nnpm install -D tailwind-scrollbar-utilities\n\n# Install using yarn\nyarn add -D tailwind-scrollbar-utilities\n```\n\n### When using CSS config\n\nAdd an import for the plugin in your CSS file. You cannot currently import only specific groups of utilities.\n\n```css\n@import \"tailwind-scrollbar-utilities\";\n```\n\n## Usage\n\n### [`scrollbar-gutter`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter)\n\n- `scrollbar-gutter-auto`: Adds `scrollbar-gutter: auto;` to the element.\n\n- `scrollbar-stable`: Adds `scrollbar-gutter: stable;` to the element.\n\n- `scrollbar-stable` along with `scrollbar-both-edges`: Adds `scrollbar-gutter: stable both-edges;` to the element.\n\n### [`scrollbar-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width)\n\n- `scrollbar-width-auto`: Adds `scrollbar-width: auto;` to the element.\n\n- `scrollbar-thin`: Adds `scrollbar-width: thin;` to the element.\n\n- `scrollbar-none`: Adds `scrollbar-width: none;` to the element. It also adds a `::-webkit-scrollbar` fallback for better browser support.\n\n### [`scrollbar-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color)\n\n- `scrollbar-color-auto`: Adds `scrollbar-color: auto;` to the element.\n\n- `scrollbar-thumb-{color}`: Sets the thumb color portion of the scrollbar color property. \n\n- `scrollbar-track-{color}`: Sets the track color portion of the scrollbar color property.\n\n- `scrollbar-color`: Adds `scrollbar-color: {thumb-color} {track-color};` to the element. It's important to note you must set both color values for this to have any effect.\n\nWhere {color} is any available tailwind color e.g. `scrollbar-thumb-teal-900`\n\nYou can also use arbitrary values such as `scrollbar-track-[Canvas]`.\n\n## License\n\nThis project is licensed under the [MIT License](https://github.com/lukewarlow/tailwind-scrollbar-utilities/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukewarlow%2Ftailwind-scrollbar-utilities","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukewarlow%2Ftailwind-scrollbar-utilities","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukewarlow%2Ftailwind-scrollbar-utilities/lists"}