{"versions":{"1.2.3":{"name":"@windicss/plugin-scrollbar","version":"1.2.3","description":"Windi CSS plugin for styling scrollbars","author":{"name":"Veritas Raven"},"main":"index.js","repository":{"type":"git","url":"https://github.com/windicss/plugins/tree/main/packages/scrollbar"},"homepage":"https://github.com/windicss/plugins/tree/main/packages/scrollbar","license":"MIT","private":false,"scripts":{"test":"jest"},"devDependencies":{"jest":"^26.6.3","lodash":"^4.17.20","postcss":"^8.2.4","snapshot-diff":"^0.8.1","tailwindcss":"^2.0.0"},"_id":"@windicss/plugin-scrollbar@1.2.3","_nodeVersion":"15.11.0","_npmVersion":"7.6.0","dist":{"integrity":"sha512-+cqv1pEmaNPITeBJ/lO6tc8IjBzRhQ+V9G8r249MMXivYoxUO4DtModBrRGHVvBgsYZgPXDsIv2jqtxc4NqYEg==","shasum":"4796e999e98a4bca6c269fa1faffd2e9b5452cac","tarball":"http://123.232.10.234:8212/nexus/content/groups/npm-public/@windicss/plugin-scrollbar/-/plugin-scrollbar-1.2.3.tgz","fileCount":4,"unpackedSize":7587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTEDUCRA9TVsSAnZWagAA8ugP/A2EtDe+aqKl7pAgY2Xa\nNpREmniQSrW7apaD5eLvhpkjs/UJwXeO6WKRd0RWu6wn4aMEABmywVwLGa8I\n+Zh24yWWpoijBt8kN/s+EPKHT1YR0mNLO4ShcHyPSjikzxPqYJIgrmrgx6gM\nj+xzEnHMOHpFNfnINo35Qc1FipfEzRSdHvfDUVsgM7xUSozbo0DRBVEH58HJ\nmaIbFt52lihaFdYMfUIfs4N8PHYb+P+ePexW27c1/GL7AmCvKO3l6daCur0h\nKhEoPcFeBZ4rFrz97TL0qSeW5f1ymaLOhhQPo4NYweK7gpTrctBX6SYvOF2o\nsrU/+8ESYq1F6Kh7E8ThYZrotBcMwFZe7FBCIJTI+iCarn3F3rD5zHDe/56y\nlZfPYtXGWTl/Xce2OPL+ROcslzBKWh6CHHpIhAfhqpirCEmLrrrU0euinKu0\nFW7j4Vx71qfaOzxARraVhVcTbKQSawvAsaQ0cBXtioqM8O3Yy3PeJUyyml3s\n6hgmcXjtGAx539kpyyQ31cXYeK0rKVKVV/oBAyc+leemaXICUC9cFPfhbGp9\n7ElOQpjRI7JLTDTqFHh3QHGZjKBnAyKSpkg9+8V6EN9dX8RA5PypBEbH1Mix\nZW3nRSd6LMLl2tjZ3sOJLvTwNCazT5gM0yRdyrf95xGL+fVJtQ15NMQULNgo\nLfBd\r\n=FGTD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSTLowrni5k8pb+mtlTm1BOEJBZC2lybz6SThbjz9kbgIgbUAuDsaVbNgI8ro5gSgq3+xCjwvivO26hAKMg04uZcQ="}]},"_npmUser":{"name":"anonymous","email":"felitas@zoho.com"},"directories":{},"maintainers":[{"name":"anonymous","email":"felitas@zoho.com"},{"name":"anonymous","email":"anthonyfu117@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plugin-scrollbar_1.2.3_1615610067759_0.01724739252145957"},"_hasShrinkwrap":false,"contributors":[]}},"dist-tags":{"latest":"1.2.3"},"name":"@windicss/plugin-scrollbar","time":{"created":"2022-01-27T22:55:16.196Z","1.2.3":"2021-03-13T04:34:27.888Z","modified":"2023-12-30T04:09:43.717Z"},"readme":"# @windicss/plugin-scrollbar\n\nAdds styling utilities for scrollbars in Firefox and webkit-based browsers. This plugin is modified based on [tailwind-scrollbar](https://github.com/adoxography/tailwind-scrollbar) to adapt to Windi CSS.\n\n## Installation\n\n```bash\nnpm install --save-dev @windicss/plugin-scrollbar\n```\n\nAdd it to the plugins array of your Config File.\n\n```js\nplugins: [\n    // ...\n    require('@windicss/plugin-scrollbar'),\n],\n```\n\n## Usage\n\n**NB:** This plugin *styles* scrollbars; it does not force them to appear. Use typical CSS techniques to force content to overflow and trigger a scrollbar.\n\nFor every element that you want to style, add either the `.scrollbar` or `.scrollbar-thin` class. You may then add any `scrollbar-track-{color}`, `scrollbar-thumb-{color}` or `hover:scrollbar-thumb-{color}` classes you like. (Note that `hover:scrollbar-thumb-{color}` classes only have effects in webkit-based browsers.)\n\nHere's a minimal example (keeping in mind that the `h-32` and `h-64` classes are just there to force the scrollbar to appear):\n\n```html\n<div class=\"h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100\">\n    <div class=\"h-64\"></div>\n</div>\n```\n\nA live version of this demo [can be found here](https://tailwind-scrollbar-example.adoxography.repl.co/).\n\n## Configuration\n\nIf you'd like to add variants for the scrollbar utilities (e.g. [dark mode](https://tailwindcss.com/docs/dark-mode)), add them to the `variants` object in your Tailwind config:\n\n```js\nvariants: {\n    // ...\n    scrollbar: ['dark']\n}\n```\n\nThis plugin also capable of adding utilties for creating rounded scrollbars (by referencing your configured [border radius](https://tailwindcss.com/docs/border-radius#customizing) settings). However, as they are only supported in Webkit-based browsers, their usage is inadvisable in cross-browser applications. To enable rounded scrollbar utilities, add `'rounded'` to the list of scrollbar variants in your config file. This will add utilities such as `scrollbar-thumb-rounded` or `scrollbar-thumb-rounded-md`.\n\n## License\n\nThis project is licensed under the [MIT License](/LICENSE).","users":{}}