【TailwindCSS】スクロールバーを見えないようにする

はじめに

普段開発でTailwindCSSを使用していますが、このスクロールバーを消したいです。

CSSでは簡単に実装できるものの、TailwindCSSの標準でスクロールを消せませんでした。。。（Tailwindだと結構こういうことある）

元々のコード.tsx

const Index: React.VFC = () => {
  return (
    <>
      <div className="flex overflow-x-auto mt-10 text-white text-xl">
        <button className="p-3 bg-green-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-blue-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-green-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-blue-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-green-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-blue-400 rounded-full w-30 -mr-96">スクロール</button>
      </div>
    </>
  )
}
export default Index

実装方法

TailwindCSSの穴はstyled-componentを用いて実装した方が良さそうです。
まずcommandでインストールします。

# with yarn and TypeScript
yarn add @types/styled-components

インストールできたらimportして実装します。

実装したコード.tsx

import styled from "styled-components"
const Index: React.VFC = () => {
　// 追加したコード
  const HiddenScrollBar = styled.div`
    ::-webkit-scrollbar {
      display: none;
    }
  `
  return (
    <>
      // divからstyled-componentに定義したCSSに変更
      <HiddenScrollBar className="flex overflow-x-auto mt-10 text-white text-xl">
        <button className="p-3 bg-green-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-blue-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-green-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-blue-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-green-400 rounded-full w-30">スクロール</button>
        <button className="p-3 bg-blue-400 rounded-full w-30 -mr-96
        ">スクロール</button>
      </HiddenScrollBar>
    </>
  )
}
export default Index

無事に実装できました

さいごに

Tailwindのようでstyled-componentの説明になってしまいましたが、一番楽な方法かなと思います。

参考サイト