使用Tailwind时如何改变滚动条(next.js/react)

Question

我正在使用 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 类来处理按钮之类的东西，既有“插件方法”又有全局样式 sheet。 (https://play.tailwindcss.com/zQftpiBCmf)

但我不明白如何更改滚动条的外观。

有人知道吗？

Answer 1

Tailwind CSS 不提供自定义滚动条样式的内置方法。但是，您可以使用各种 ::-webkit-scrollbar 伪元素来设置样式。

顺风游乐场link：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;
}

Answer 2

/* 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;
}

Answer 3

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>

只有一种 SCROLLBAR 样式是滚动条细的...因此请按此方式自定义

使用Tailwind时如何改变滚动条(next.js/react)

How to change scrollbar when using Tailwind (next.js/react)

css

reactjs

next.js

tailwind-css