scrollbar-widthと-webkit-scrollbarでコードブロックのスクロールバーを細くする

<pre> 要素のデフォルト横スクロールバーが、ミニマルなブログデザインに対して存在感がありすぎた。もっと細く控えめにしたい。

Firefox 向けの標準プロパティと、WebKit 系ブラウザ向けの擬似要素の2つを併用する：

globals.css

pre {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
 
  &::-webkit-scrollbar {
    height: 4px;
  }
 
  &::-webkit-scrollbar-track {
    background: transparent;
  }
 
  &::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
  }
}

scrollbar-width: thin は CSS 標準プロパティで Firefox で有効。Chrome や Safari はこれを無視するので ::-webkit-scrollbar 系が必要になる。クロスブラウザ対応には両方書く。

Tailwind CSS v4 での注意点として、[data-rehype-pretty-code-figure] pre のような属性セレクタだと正しく適用されなかった。シンプルに pre セレクタにしたら解決した。