├── .gitignore ├── LICENSE ├── README.md ├── package.json └── src └── index.css /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.toptal.com/developers/gitignore/api/macos,windows,linux,webstorm+all,vscode,node 3 | # Edit at https://www.toptal.com/developers/gitignore?templates=macos,windows,linux,webstorm+all,vscode,node 4 | 5 | ### Linux ### 6 | *~ 7 | 8 | # temporary files which can be created if a process still has a handle open of a deleted file 9 | .fuse_hidden* 10 | 11 | # KDE directory preferences 12 | .directory 13 | 14 | # Linux trash folder which might appear on any partition or disk 15 | .Trash-* 16 | 17 | # .nfs files are created when an open file is removed but is still being accessed 18 | .nfs* 19 | 20 | ### macOS ### 21 | # General 22 | .DS_Store 23 | .AppleDouble 24 | .LSOverride 25 | 26 | # Icon must end with two \r 27 | Icon 28 | 29 | 30 | # Thumbnails 31 | ._* 32 | 33 | # Files that might appear in the root of a volume 34 | .DocumentRevisions-V100 35 | .fseventsd 36 | .Spotlight-V100 37 | .TemporaryItems 38 | .Trashes 39 | .VolumeIcon.icns 40 | .com.apple.timemachine.donotpresent 41 | 42 | # Directories potentially created on remote AFP share 43 | .AppleDB 44 | .AppleDesktop 45 | Network Trash Folder 46 | Temporary Items 47 | .apdisk 48 | 49 | ### Node ### 50 | # Logs 51 | logs 52 | *.log 53 | npm-debug.log* 54 | yarn-debug.log* 55 | yarn-error.log* 56 | lerna-debug.log* 57 | 58 | # Diagnostic reports (https://nodejs.org/api/report.html) 59 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 60 | 61 | # Runtime data 62 | pids 63 | *.pid 64 | *.seed 65 | *.pid.lock 66 | 67 | # Directory for instrumented libs generated by jscoverage/JSCover 68 | lib-cov 69 | 70 | # Coverage directory used by tools like istanbul 71 | coverage 72 | *.lcov 73 | 74 | # nyc test coverage 75 | .nyc_output 76 | 77 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 78 | .grunt 79 | 80 | # Bower dependency directory (https://bower.io/) 81 | bower_components 82 | 83 | # node-waf configuration 84 | .lock-wscript 85 | 86 | # Compiled binary addons (https://nodejs.org/api/addons.html) 87 | build/Release 88 | 89 | # Dependency directories 90 | node_modules/ 91 | jspm_packages/ 92 | 93 | # TypeScript v1 declaration files 94 | typings/ 95 | 96 | # TypeScript cache 97 | *.tsbuildinfo 98 | 99 | # Optional npm cache directory 100 | .npm 101 | 102 | # Optional eslint cache 103 | .eslintcache 104 | 105 | # Optional stylelint cache 106 | .stylelintcache 107 | 108 | # Microbundle cache 109 | .rpt2_cache/ 110 | .rts2_cache_cjs/ 111 | .rts2_cache_es/ 112 | .rts2_cache_umd/ 113 | 114 | # Optional REPL history 115 | .node_repl_history 116 | 117 | # Output of 'npm pack' 118 | *.tgz 119 | 120 | # Yarn Integrity file 121 | .yarn-integrity 122 | 123 | # dotenv environment variables file 124 | .env 125 | .env.test 126 | .env*.local 127 | 128 | # parcel-bundler cache (https://parceljs.org/) 129 | .cache 130 | .parcel-cache 131 | 132 | # Next.js build output 133 | .next 134 | 135 | # Nuxt.js build / generate output 136 | .nuxt 137 | dist 138 | 139 | # Storybook build outputs 140 | .out 141 | .storybook-out 142 | storybook-static 143 | 144 | # rollup.js default build output 145 | dist/ 146 | 147 | # Gatsby files 148 | .cache/ 149 | # Comment in the public line in if your project uses Gatsby and not Next.js 150 | # https://nextjs.org/blog/next-9-1#public-directory-support 151 | # public 152 | 153 | # vuepress build output 154 | .vuepress/dist 155 | 156 | # Serverless directories 157 | .serverless/ 158 | 159 | # FuseBox cache 160 | .fusebox/ 161 | 162 | # DynamoDB Local files 163 | .dynamodb/ 164 | 165 | # TernJS port file 166 | .tern-port 167 | 168 | # Stores VSCode versions used for testing VSCode extensions 169 | .vscode-test 170 | 171 | # Temporary folders 172 | tmp/ 173 | temp/ 174 | 175 | ### vscode ### 176 | .vscode/* 177 | !.vscode/settings.json 178 | !.vscode/tasks.json 179 | !.vscode/launch.json 180 | !.vscode/extensions.json 181 | *.code-workspace 182 | 183 | ### WebStorm+all ### 184 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider 185 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 186 | 187 | # User-specific stuff 188 | .idea/**/workspace.xml 189 | .idea/**/tasks.xml 190 | .idea/**/usage.statistics.xml 191 | .idea/**/dictionaries 192 | .idea/**/shelf 193 | 194 | # Generated files 195 | .idea/**/contentModel.xml 196 | 197 | # Sensitive or high-churn files 198 | .idea/**/dataSources/ 199 | .idea/**/dataSources.ids 200 | .idea/**/dataSources.local.xml 201 | .idea/**/sqlDataSources.xml 202 | .idea/**/dynamic.xml 203 | .idea/**/uiDesigner.xml 204 | .idea/**/dbnavigator.xml 205 | 206 | # Gradle 207 | .idea/**/gradle.xml 208 | .idea/**/libraries 209 | 210 | # Gradle and Maven with auto-import 211 | # When using Gradle or Maven with auto-import, you should exclude module files, 212 | # since they will be recreated, and may cause churn. Uncomment if using 213 | # auto-import. 214 | # .idea/artifacts 215 | # .idea/compiler.xml 216 | # .idea/jarRepositories.xml 217 | # .idea/modules.xml 218 | # .idea/*.iml 219 | # .idea/modules 220 | # *.iml 221 | # *.ipr 222 | 223 | # CMake 224 | cmake-build-*/ 225 | 226 | # Mongo Explorer plugin 227 | .idea/**/mongoSettings.xml 228 | 229 | # File-based project format 230 | *.iws 231 | 232 | # IntelliJ 233 | out/ 234 | 235 | # mpeltonen/sbt-idea plugin 236 | .idea_modules/ 237 | 238 | # JIRA plugin 239 | atlassian-ide-plugin.xml 240 | 241 | # Cursive Clojure plugin 242 | .idea/replstate.xml 243 | 244 | # Crashlytics plugin (for Android Studio and IntelliJ) 245 | com_crashlytics_export_strings.xml 246 | crashlytics.properties 247 | crashlytics-build.properties 248 | fabric.properties 249 | 250 | # Editor-based Rest Client 251 | .idea/httpRequests 252 | 253 | # Android studio 3.1+ serialized cache file 254 | .idea/caches/build_file_checksums.ser 255 | 256 | ### WebStorm+all Patch ### 257 | # Ignores the whole .idea folder and all .iml files 258 | # See https://github.com/joeblau/gitignore.io/issues/186 and https://github.com/joeblau/gitignore.io/issues/360 259 | 260 | .idea/ 261 | 262 | # Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-249601023 263 | 264 | *.iml 265 | modules.xml 266 | .idea/misc.xml 267 | *.ipr 268 | 269 | # Sonarlint plugin 270 | .idea/sonarlint 271 | 272 | ### Windows ### 273 | # Windows thumbnail cache files 274 | Thumbs.db 275 | Thumbs.db:encryptable 276 | ehthumbs.db 277 | ehthumbs_vista.db 278 | 279 | # Dump file 280 | *.stackdump 281 | 282 | # Folder config file 283 | [Dd]esktop.ini 284 | 285 | # Recycle Bin used on file shares 286 | $RECYCLE.BIN/ 287 | 288 | # Windows Installer files 289 | *.cab 290 | *.msi 291 | *.msix 292 | *.msm 293 | *.msp 294 | 295 | # Windows shortcuts 296 | *.lnk 297 | 298 | # End of https://www.toptal.com/developers/gitignore/api/macos,windows,linux,webstorm+all,vscode,node 299 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Luke Warlow 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # TailwindCSS Scrollbar Utilities Plugin 2 | 3 | [![npm](https://img.shields.io/npm/v/tailwind-scrollbar-utilities.svg?style=flat-square)](https://www.npmjs.com/package/tailwind-scrollbar-utilities) 4 | 5 | This plugin generates utility classes for [`scrollbar-gutter`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter), 6 | [`scrollbar-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width), 7 | and [`scrollbar-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color). 8 | 9 | ## Installation 10 | 11 | Add to your project via: 12 | 13 | ```bash 14 | # Install using npm 15 | npm install -D tailwind-scrollbar-utilities 16 | 17 | # Install using yarn 18 | yarn add -D tailwind-scrollbar-utilities 19 | ``` 20 | 21 | ### When using CSS config 22 | 23 | Add an import for the plugin in your CSS file. You cannot currently import only specific groups of utilities. 24 | 25 | ```css 26 | @import "tailwind-scrollbar-utilities"; 27 | ``` 28 | 29 | ## Usage 30 | 31 | ### [`scrollbar-gutter`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter) 32 | 33 | - `scrollbar-gutter-auto`: Adds `scrollbar-gutter: auto;` to the element. 34 | 35 | - `scrollbar-stable`: Adds `scrollbar-gutter: stable;` to the element. 36 | 37 | - `scrollbar-stable` along with `scrollbar-both-edges`: Adds `scrollbar-gutter: stable both-edges;` to the element. 38 | 39 | ### [`scrollbar-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width) 40 | 41 | - `scrollbar-width-auto`: Adds `scrollbar-width: auto;` to the element. 42 | 43 | - `scrollbar-thin`: Adds `scrollbar-width: thin;` to the element. 44 | 45 | - `scrollbar-none`: Adds `scrollbar-width: none;` to the element. It also adds a `::-webkit-scrollbar` fallback for better browser support. 46 | 47 | ### [`scrollbar-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color) 48 | 49 | - `scrollbar-color-auto`: Adds `scrollbar-color: auto;` to the element. 50 | 51 | - `scrollbar-thumb-{color}`: Sets the thumb color portion of the scrollbar color property. 52 | 53 | - `scrollbar-track-{color}`: Sets the track color portion of the scrollbar color property. 54 | 55 | - `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. 56 | 57 | Where {color} is any available tailwind color e.g. `scrollbar-thumb-teal-900` 58 | 59 | You can also use arbitrary values such as `scrollbar-track-[Canvas]`. 60 | 61 | ## License 62 | 63 | This project is licensed under the [MIT License](https://github.com/lukewarlow/tailwind-scrollbar-utilities/blob/master/LICENSE). 64 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwind-scrollbar-utilities", 3 | "version": "0.3.0", 4 | "type": "module", 5 | "description": "Tailwind plugin for scrollbar class utilities", 6 | "keywords": [ 7 | "tailwind", 8 | "tailwindcss", 9 | "tailwind-css", 10 | "tailwindcss-plugin", 11 | "scrollbar", 12 | "scrollbar-gutter", 13 | "scrollbar-width", 14 | "scrollbar-color" 15 | ], 16 | "repository": "https://github.com/lukewarlow/tailwind-scrollbar-utilities", 17 | "author": "Luke Warlow", 18 | "license": "MIT", 19 | "files": ["dist", "src"], 20 | "style": "./dist/index.css", 21 | "exports": { 22 | ".": { 23 | "style": "./dist/index.css" 24 | }, 25 | "./index.css": "./dist/index.css", 26 | "./index": "./dist/index.css", 27 | "./package.json": "./package.json" 28 | }, 29 | "scripts": { 30 | "build": "cp src/index.css dist/index.css" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @theme { 2 | --tw-scrollbar-thumb-color: ''; 3 | --tw-scrollbar-track-color: ''; 4 | --tw-scrollbar-gutter-modifier: ''; 5 | } 6 | 7 | @utility scrollbar-none { 8 | scrollbar-width: none; 9 | &::-webkit-scrollbar { 10 | display: none; 11 | } 12 | } 13 | 14 | @utility scrollbar-thin { 15 | scrollbar-width: thin; 16 | } 17 | 18 | @utility scrollbar-width-auto { 19 | scrollbar-width: auto; 20 | } 21 | 22 | @utility scrollbar-gutter-auto { 23 | scrollbar-gutter: auto; 24 | } 25 | 26 | @utility scrollbar-stable { 27 | scrollbar-gutter: stable var(--tw-scrollbar-gutter-modifier); 28 | } 29 | 30 | @utility scrollbar-both-edges { 31 | --tw-scrollbar-gutter-modifier: both-edges; 32 | } 33 | 34 | @utility scrollbar-color-auto { 35 | scrollbar-color: auto; 36 | } 37 | 38 | @utility scrollbar-color { 39 | scrollbar-color: var(--tw-scrollbar-thumb-color) var(--tw-scrollbar-track-color); 40 | } 41 | 42 | @utility scrollbar-thumb-* { 43 | --tw-scrollbar-thumb-color: --value(--color-*); 44 | } 45 | 46 | @utility scrollbar-track-* { 47 | --tw-scrollbar-track-color: --value(--color-*); 48 | } 49 | --------------------------------------------------------------------------------