スクロールバーを非表示にしてスクロールしたいぺこ！

追記

完全に非表示にする方法が見つかりました。
どこかの記事で見たので以下のコードで検索すれば出てくるはずです。
paddingとか残らず本当の意味で非表示にできます

.scroll-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-hidden::-webkit-scrollbar {
  display: none;
}

まず素朴にスクロールできる環境を作る

おそらく

• w-fullで横幅を指定
• 子要素が親要素以上の長さを持つ
• overflow-x-scrollを指定している
  で実現できています

.bg-white.rounded-md.w-full.p-3.overflow-x-scroll
  p 111111223212312312312312312312312312312312jdfgnskjdfngosjdnfgojksndfogkjnsdofkgnmsodkfgmoskdfmgoskdfmgoskdmfgoksdmfgoksmdfogkmsdofkgmsodkfmgoksdfmgoksmdfgokmsdfogkmsdokfg

最初に立てた方針としてスクロールバーを非表示にしたいと考えていました。
しかし、スクロールバーは非表示(透明にも)ができないと判断しました。
なので方針を変えてDOMに残るがユーザーからは見えない要素を作るという方針にしました

白いスクロールバーにしてみた結果
スクロールバーがユーザーから見えなくなりました。
しかし、パディングとしては残るのでこれをどうにかしたいですね。

.bg-white.rounded-md.w-full.p-3.white-scrollbar
  p 111111223212312312312312312312312312312312jdfgnskjdfngosjdnfgojksndfogkjnsdofkgnmsodkfgmoskdfmgoskdfmgoskdmfgoksdmfgoksmdfogkmsdofkgmsodkfmgoksdfmgoksmdfgokmsdfogkmsdokfg

.white-scrollbar {
  overflow-x: scroll;
  scrollbar-color: white white;
}

灰色でも試してみましたが、こうすれば完全に同化して見えなくなりますね！
(さっきの白でも自然なpadding-bottomとして見えるようにすれば解決しますが…)

.rounded-md.w-full.px-3.pb-0.gray-scrollbar
  p 111111223212312312312312312312312312312312jdfgnskjdfngosjdnfgojksndfogkjnsdofkgnmsodkfgmoskdfmgoskdfmgoskdmfgoksdmfgoksmdfogkmsdofkgmsodkfmgoksdfmgoksmdfgokmsdfogkmsdokfg

.gray-scrollbar {
  overflow-x: scroll;
  scrollbar-color: #F2F2F2 #F2F2F2;
}