Skip to content

Commit 2a6ebd3

Browse files
christhoferchristhofer
committed
v0.1.0
0 parents  commit 2a6ebd3

File tree

6 files changed

+155
-0
lines changed

6 files changed

+155
-0
lines changed

‎.eslintrc.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
browser: true,
5+
es6: true,
6+
},
7+
rules: {
8+
'brace-style': 'warn', // [1tbs default, stroustrup, allman]
9+
'comma-dangle': ['warn', 'always-multiline'],
10+
'indent': ['warn', 2],
11+
'no-unused-vars': 'warn',
12+
'quotes': ['warn', 'single', { avoidEscape: true }],
13+
'semi': ['warn', 'never'],
14+
15+
'array-bracket-spacing': ['warn', 'never'],
16+
'comma-spacing': ['warn', { before: false, after: true }],
17+
'key-spacing': ['warn'],
18+
'keyword-spacing': ['warn'],
19+
'no-multi-spaces': ['warn'],
20+
'no-trailing-spaces': ['warn'],
21+
'object-curly-spacing': ['warn', 'always'],
22+
'space-before-function-paren': ['warn', 'always'],
23+
'space-before-blocks': 'warn',
24+
'space-infix-ops': ['warn'],
25+
'space-in-parens': ['warn', 'never'],
26+
},
27+
globals: {
28+
process: true,
29+
},
30+
}

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
yarn.lock
3+
package-lock.json

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 Gradin Tech Solution
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.

‎README.md

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# tailwindcss-scrollbar
2+
3+
Tailwindcss plugin to customize browser scrollbar.
4+
5+
![npm (scoped)](https://img.shields.io/npm/v/@gradin/tailwindcss-scrollbar)
6+
![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@gradin/tailwindcss-scrollbar)
7+
![npm](https://img.shields.io/npm/dw/@gradin/tailwindcss-scrollbar)
8+
9+
## Installation
10+
11+
```sh
12+
# Using npm
13+
npm install -D @gradin/tailwindcss-scrollbar
14+
15+
# Using Yarn
16+
yarn add -D @gradin/tailwindcss-scrollbar
17+
```
18+
19+
Then add the plugin to `tailwind.config.js` file
20+
21+
```js
22+
module.exports = {
23+
theme: {
24+
// ...
25+
},
26+
plugins: [
27+
require('@gradin/tailwindcss-scrollbar')({
28+
size: '5px',
29+
colors: {
30+
track: 'lightgray', // default '#f1f1f1'
31+
thumb: 'gray', // default '#c1c1c1'
32+
thumbHover: 'darkgray', // default '#a8a8a8'
33+
}
34+
}),
35+
// ...
36+
],
37+
}
38+
```
39+
40+
## Browser Support
41+
42+
Custom scrollbars are not supported in Firefox or in Edge, prior version 79.

‎package.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "@gradin/tailwindcss-scrollbar",
3+
"version": "0.1.0",
4+
"description": "Tailwindcss plugin to customize scrollbar.",
5+
"main": "src/index.js",
6+
"scripts": {},
7+
"repository": {
8+
"type": "git",
9+
"url": "git+https://github.com/gradints/tailwindcss-scrollbar.git"
10+
},
11+
"publishConfig": {
12+
"access": "public"
13+
},
14+
"keywords": [
15+
"tailwind",
16+
"tailwindcss",
17+
"scrollbar"
18+
],
19+
"author": "Christhofer",
20+
"license": "MIT",
21+
"bugs": {
22+
"url": "https://github.com/gradints/tailwindcss-scrollbar/issues"
23+
},
24+
"homepage": "https://github.com/gradints/tailwindcss-scrollbar#readme",
25+
"devDependencies": {
26+
"eslint": "^7.24.0",
27+
"tailwindcss": "^2.1.1"
28+
}
29+
}

‎src/index.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const plugin = require('tailwindcss/plugin')
2+
3+
module.exports = plugin.withOptions(function (options) {
4+
return function ({ addBase }) {
5+
// const size = options?.size ?? '5px'
6+
// const { track, thumb, thumbHover } = options?.colors ?? {}
7+
8+
const size = options && options.size ? options.size : '5px'
9+
const { track, thumb, thumbHover } = options && options.colors ? options.colors : {}
10+
11+
addBase([
12+
{
13+
'::-webkit-scrollbar': {
14+
width: size,
15+
height: size,
16+
},
17+
'::-webkit-scrollbar-track': {
18+
background: track ? track : '#f1f1f1',
19+
},
20+
'::-webkit-scrollbar-thumb': {
21+
background: thumb ? thumb : '#c1c1c1',
22+
},
23+
'::-webkit-scrollbar-thumb:hover': {
24+
background: thumbHover ? thumbHover : '#a8a8a8',
25+
},
26+
},
27+
])
28+
}
29+
})
30+

0 commit comments

Comments
 (0)