Osc*_*and 35 css reactjs next.js tailwind-css
我正在使用 Tailwind (react/next) 并努力改变我的滚动条的外观。
这是一个单页应用程序，我一直在尝试创建自定义 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>
我可以使用自定义 CSS 类来处理按钮等内容，既具有“插件方法”又具有全局样式表。（https://play.tailwindcss.com/zQftpiBCmf）
但我不明白如何改变滚动条的外观。
有人有主意吗？
jul*_*ves 57
Tailwind CSS 不提供自定义滚动条样式的内置方法。但是，您可以使用各种::-webkit-scrollbar伪元素来设置其样式。
Tailwind 游乐场链接：https://play.tailwindcss.com/5samiwyr4v。
@layer utilities {
.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;
}
}
小智 24
yarn add -D tailwind-scrollbar
或者
npm install --save-dev tailwind-scrollbar
然后
plugins: [
// ...
require('tailwind-scrollbar'),
],
样本
<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100">
<div class="h-64"></div>
</div>
变体
variants: {
// ...
scrollbar: ['dark']
}
例如，如果您想更改滚动条的宽度，您可以在tailwind.css中进行自定义
@layer utilities {
.scrollbar-medium::-webkit-scrollbar {
width: 12px;
}
}
然后
<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100 scrollbar-medium">
<div class="h-64"></div>
</div>
滚动条只有一种样式，它是滚动条细的......所以以这种方式自定义
我已经成功地使用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'),
},
});
}),
],
// ...
};
并像这样使用：
<div class="scrollbar">
<!-- content -->
</div>
小智 5
/* 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;
}
| 归档时间： |
|
| 查看次数： |
45619 次 |
| 最近记录： |