使用 Tailwind (next.js/react) 时如何更改滚动条
[英]How to change scrollbar when using Tailwind (next.js/react)
问题描述
I'm using Tailwind (react/next) and struggle to change the way my scrollbar looks.
我正在使用 Tailwind (react/next) 并且努力改变我的滚动条的外观。
It's a single page application and I have been trying to create custom CSS to apply to the first div in my index file, like this:这是一个单页应用程序，我一直在尝试创建自定义 CSS 以应用于我的索引文件中的第一个 div，如下所示：
<div className="no-scroll"> <<<<<<<--------- Adding custom css here
<Head>
<title>Oscar Ekstrand</title>
<link rel="icon" href="/images/favicon.ico" />
</Head>
<main className="flex flex-col no-scroll">
<section ref={heroref}>
<Hero scrollToContacts={scrollToContacts} />
</section>
<section ref={offeringref}>
<Offering />
</section>
<section ref={processref}>
<WhatIDo />
</section>
<section ref={biographyref}>
<CvBar />
</section>
<section ref={skillsetref}>
<Skillset />
</section>
</main>
<section ref={contactsref}>
<Footer />
</section>
</div>
I can get custom CSS classes to work for things like buttons, both with a "plugin-approach" and having a global style sheet.我可以获得自定义 CSS 类来处理按钮之类的东西，既具有“插件方法”，又具有全局样式表。 ( https://play.tailwindcss.com/zQftpiBCmf ) （ https://play.tailwindcss.com/zQftpiBCmf ）
But I can't understand how to change the look of my scrollbar.但我不明白如何改变我的滚动条的外观。
Anyone got an idea?有人有想法吗？
6 个解决方案
解决方案1
12 已采纳 2021-10-01 17:53:12
Tailwind CSS doesn't provide a built-in way to customise the scrollbar styling. Tailwind CSS 不提供自定义滚动条样式的内置方式。 However, you can use the various ::-webkit-scrollbar pseudo-elements to style it.但是，您可以使用各种::-webkit-scrollbar伪元素来设置它的样式。
Tailwind playground link: https://play.tailwindcss.com/5samiwyr4v . Tailwind 游乐场链接： https ://play.tailwindcss.com/5samiwyr4v。
.scrollbar::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.scrollbar::-webkit-scrollbar-track {
border-radius: 100vh;
background: #f7f4ed;
}
.scrollbar::-webkit-scrollbar-thumb {
background: #e0cbcb;
border-radius: 100vh;
border: 3px solid #f6f7ed;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background: #c0a0b9;
}
解决方案2
6 2021-12-15 03:11:42
yarn add -D tailwind-scrollbar
or或者
npm install --save-dev tailwind-scrollbar
then然后
plugins: [
// ...
require('tailwind-scrollbar'),
],
sample样本
<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100">
<div class="h-64"></div>
</div>
variants变种
variants: {
// ...
scrollbar: ['dark']
}
FOR SOME INSTANCE IF YOU WANT TO CHANGE THE WIDTH OF THE SCROLLBAR YOU CAN CUSTOME IN YOUR tailwind.css例如，如果您想更改滚动条的宽度，您可以在tailwind.css中自定义
@layer utilities {
.scrollbar-medium::-webkit-scrollbar {
width: 12px;
}
}
then然后
<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100 scrollbar-medium">
<div class="h-64"></div>
</div>
THERE IS ONLY ONE STYLE FOR SCROLLBAR WHICH IS scrollbar-thin... so customize this way滚动条只有一种样式，滚动条很薄......所以以这种方式自定义
解决方案3
1 2021-10-03 16:51:11
/* For Firefox Browser */
.scrollbar {
scrollbar-width: thin;
scrollbar-color: #000 #fff;
}
/* For Chrome, EDGE, Opera, Others */
.scrollbar::-webkit-scrollbar {
width: 20px;
}
.scrollbar::-webkit-scrollbar-track {
background: #fff;
}
.scrollbar::-webkit-scrollbar-thumb {
background:#000;
}
解决方案4
0 2022-07-07 15:48:22
I've managed to style the scrollbar with Tailwin plugin like this:我已经设法使用Tailwin 插件设置滚动条的样式，如下所示：
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
module.exports = {
// ...
plugins: [
plugin(({ addBase, theme }) => {
addBase({
'.scrollbar': {
overflowY: 'auto',
scrollbarColor: `${theme('colors.blue.600')} ${theme('colors.blue.200')}`,
scrollbarWidth: 'thin',
},
'.scrollbar::-webkit-scrollbar': {
height: '2px',
width: '2px',
},
'.scrollbar::-webkit-scrollbar-thumb': {
backgroundColor: theme('colors.blue.600'),
},
'.scrollbar::-webkit-scrollbar-track-piece': {
backgroundColor: theme('colors.blue.200'),
},
});
}),
],
// ...
};
And use like this:并像这样使用：
<div class="scrollbar">
<!-- content -->
</div>
解决方案5
0 2022-08-31 13:42:35
TailwindCSS's doc changed scrollbar styles by scrollbar:.w-1:5 scrollbar.:h-1:5 scrollbar:bg-transparent scrollbar-track::bg-slate-100 scrollbar-thumb:!rounded scrollbar-thumb:!bg-slate-300 scrollbar-track:!rounded , the plugin they use TailwindCSS 的文档更改了滚动条 styles by scrollbar:.w-1:5 scrollbar.:h-1:5 scrollbar:bg-transparent scrollbar-track::bg-slate-100 scrollbar-thumb:!rounded scrollbar-thumb:!bg-slate-300 scrollbar-track:!rounded ，他们使用的插件
/** @type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
content: ['./src/**/*.{html,ts,tsx,js}'],
darkMode: 'media',
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
// https://github.com/tailwindlabs/tailwindcss.com/blob/ceb07ba4d7694ef48e108e66598a20ae31cced19/tailwind.config.js#L280-L284
function ({ addVariant }) {
addVariant(
'supports-backdrop-blur',
'@supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))',
);
addVariant('supports-scrollbars', '@supports selector(::-webkit-scrollbar)');
addVariant('children', '& > *');
addVariant('scrollbar', '&::-webkit-scrollbar');
addVariant('scrollbar-track', '&::-webkit-scrollbar-track');
addVariant('scrollbar-thumb', '&::-webkit-scrollbar-thumb');
},
],
};
解决方案6
0 2022-09-20 17:09:15
Addition to that comment: https://stackoverflow.com/a/69410151/18041352除了该评论： https://stackoverflow.com/a/69410151/18041352
You can add darktheme option just adding dark:scrollbarkdark or what you want to name that.您可以添加 darktheme 选项，只需添加 dark:scrollbarkdark 或您想要命名的内容。
<div className="... overflow-auto scrollbar dark:scrollbarkdark> ...
Then add this in your main css file like in that comment above.然后将其添加到您的主 css 文件中，就像上面的评论一样。
.scrollbar::-webkit-scrollbar-track {
background: white;
}
.scrollbardark::-webkit-scrollbar-track {
background: black;
}
...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.