【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의 설명이 되어 버렸습니다만, 가장 편한 방법일까라고 생각합니다.

참고 사이트