{"id":18963662,"url":"https://github.com/gradints/tailwindcss-scrollbar","last_synced_at":"2025-04-19T12:05:40.958Z","repository":{"id":42623471,"uuid":"356583410","full_name":"gradints/tailwindcss-scrollbar","owner":"gradints","description":"Tailwindcss plugin to customize browser scrollbar.","archived":false,"fork":false,"pushed_at":"2022-11-22T10:13:21.000Z","size":453,"stargazers_count":25,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T18:15:24.357Z","etag":null,"topics":["css","scrollbar","tailwind","tailwindcss","tailwindcss-plugin"],"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/gradints.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-04-10T13:02:26.000Z","updated_at":"2025-01-13T15:24:40.000Z","dependencies_parsed_at":"2023-01-21T16:45:41.169Z","dependency_job_id":null,"html_url":"https://github.com/gradints/tailwindcss-scrollbar","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gradints%2Ftailwindcss-scrollbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gradints%2Ftailwindcss-scrollbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gradints%2Ftailwindcss-scrollbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gradints%2Ftailwindcss-scrollbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gradints","download_url":"https://codeload.github.com/gradints/tailwindcss-scrollbar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249201117,"owners_count":21229004,"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","scrollbar","tailwind","tailwindcss","tailwindcss-plugin"],"created_at":"2024-11-08T14:21:08.602Z","updated_at":"2025-04-16T05:31:22.264Z","avatar_url":"https://github.com/gradints.png","language":"JavaScript","readme":"# tailwindcss-scrollbar\n\nTailwindcss plugin to customize browser scrollbar.\n\n[![npm (scoped)](https://img.shields.io/npm/v/@gradin/tailwindcss-scrollbar)](https://www.npmjs.com/package/@gradin/tailwindcss-scrollbar)\n![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@gradin/tailwindcss-scrollbar)\n![npm](https://img.shields.io/npm/dt/@gradin/tailwindcss-scrollbar)\n\n[Live Demo](https://play.tailwindcss.com/ITNFDL0Skg)\n\n## Installation\n\n```sh\n# Using npm\nnpm install -D @gradin/tailwindcss-scrollbar\n\n# Using Yarn\nyarn add -D @gradin/tailwindcss-scrollbar\n```\n\nThen add the plugin to `tailwind.config.js` file.\n\n```js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('@gradin/tailwindcss-scrollbar'),\n  ],\n}\n```\n\n## Configuration\n\nYou can customize the size and color of the scrollbar. Also supports any css attributes such as `borderRadius`.\n\n⚠️ See [release notes](https://github.com/gradints/tailwindcss-scrollbar/releases/tag/2.0.2) if you are upgrading from v1 ⚠️\n\n```js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('@gradin/tailwindcss-scrollbar')({\n      size: '5px', // width or height, default '5px'\n      track: {\n        background: 'lightgray', // default '#f1f1f1'\n        // add any css attributes here, will be merged to ::-webkit-scrollbar-track\n      },\n      thumb: {\n        background: 'gray', // default '#c1c1c1'\n        borderRadius: '40px',\n        // add any css attributes here, will be merged to ::-webkit-scrollbar-thumb\n      },\n      hover: {\n        background: 'darkgray', // default '#a8a8a8'\n        borderRadius: '40px',\n        // add any css attributes here, will be merged to ::-webkit-scrollbar-thumb:hover\n      },\n    }),\n  ],\n}\n```\n\nTo use attributes from your config.theme, you need to override `theme.scrollbar.DEFAULT`.\n\n```js\nmodule.exports = {\n  theme: {\n    // ...\n    scrollbar: theme =\u003e ({\n      DEFAULT: {\n        size: theme('spacing.1'),\n        track: {\n          background: theme('colors.gray.300'),\n        },\n        thumb: {\n          background: theme('colors.gray.400'),\n        },\n        hover: {\n          background: theme('colors.gray.500'),\n        },\n      },\n    })\n  },\n  plugins: [\n    require('@gradin/tailwindcss-scrollbar'),\n  ],\n}\n```\n\n## Multiple scrollbar styles\n\nYou can add more scrollbar styles using `theme.scrollbar.STYLE_NAME`\n\nThey need to have `size`, `track`, `thumb`, `hover` property specified, as they don't have default value.\n\n```js\nmodule.exports = {\n  theme: {\n    // ...\n    scrollbar: {\n      thin: {\n        size: '2px',\n        track: { background: 'lightgray' },\n        thumb: { background: 'gray' },\n        hover: { background: 'darkgray' },\n      },\n      blue: {\n        size: '8px',\n        track: { background: 'lightblue' },\n        thumb: { background: 'blue' },\n        hover: { background: 'darkblue' },\n      },\n    },\n  },\n}\n```\n```html\n\u003cdiv class=\"overflow-auto scrollbar-thin\"\u003e\u003c/div\u003e\n\u003cdiv class=\"overflow-auto scrollbar-blue\"\u003e\u003c/div\u003e\n```\n## Dark Mode\n\nTo set different background color on dark mode, you can use `darkBackground` attribute. If unset, they will have the same color as the `background`.\n\n```js\ntrack: {\n  background: theme('colors.gray.300'),\n  darkBackground: theme('colors.gray.800'),\n},\nthumb: {\n  background: theme('colors.gray.400'),\n  darkBackground: theme('colors.gray.600'),\n},\nhover: {\n  background: theme('colors.gray.500'),\n  darkBackground: theme('colors.gray.500'),\n},\n```\n\n## Hides scrollbar\n\nTo hide the scrollbar but still make it scrollable, use `scrollbar-none` class\non the element with `overflow: auto | scroll`.\n\n```html\n\u003cdiv class=\"overflow-auto scrollbar-none\"\u003e\n  \u003c!-- Very long content here --\u003e\n\u003c/div\u003e\n```\n\nThis is done by using `scrollbar-width: none` on Firefox and `::-webkit-scrollbar{display:none}` on Chrome.\n\n\n## Browser Support\n\nThis plugin uses `::-webkit-scrollbar` to modify scrollbar style.\n\nNot supported on **all versions of Firefox** and **Edge version 78 or older**.\n\n[See Browser Compatibility](https://caniuse.com/?search=%3A%3A-webkit-scrollbar)\n\n`.scrollbar-none` is supported on [Firefox version 64 or newer](https://caniuse.com/?search=scrollbar-width).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgradints%2Ftailwindcss-scrollbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgradints%2Ftailwindcss-scrollbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgradints%2Ftailwindcss-scrollbar/lists"}