Tailwind CSS v4.3

507文字
3分
編集
#Tailwind CSS #CSS

Tailwind CSS v4.3 が公開された。同日付のブログ投稿は v4.2 の変更もまとめて紹介しており、v4.2 は 2026 年 2 月にリリース済みだがブログ化されていなかった分を補う構成になっている。

v4.3 の主な追加は次のとおりである。

  • スクロールバー: scrollbar-auto / scrollbar-thin / scrollbar-none（scrollbar-width）、scrollbar-thumb-* / scrollbar-track-*（scrollbar-color）、scrollbar-gutter-auto / scrollbar-gutter-stable / scrollbar-gutter-both（scrollbar-gutter）。色には従来どおり不透明度修飾子が使える。
  • コンテナクエリ: ブロックサイズを扱う cqb / cqh 向けに @container-size と @container-size/{name} を追加。v4.0 の @container はインラインサイズコンテナ用のまま。
  • レイアウト・タイポ: CSS zoom 向けの zoom-*、タブ幅向けの tab-*（任意値・CSS 変数も可）。
  • CSS 内バリアント: @variant でスタック（例: hover:focus）と複合（例: hover, focus）を指定可能。
  • プラグイン API: 関数型 @utility の --value(…) / --modifier(…) に --default(…) を渡し、値なしのユーティリティでも既定値を持たせられる（例: tab-* の素の tab が 4 にフォールバック）。
html
<div class="scrollbar-thin scrollbar-thumb-slate-900/60 scrollbar-track-slate-900/10 overflow-auto">
  <!-- ... -->
</div>

v4.3 では Vite / PostCSS まわりの @plugin 解決、@variant を含む CSS の処理、任意値の正規化（has-[…] への移行や単位保持など）も修正されている。

v4.2 では次が入っている。

  • デフォルトテーマに mauve / olive / mist / taupe の 4 パレットを追加（Tailwind Plus の Oatmeal 由来）。
  • @tailwindcss/webpack を追加。PostCSS 経由より直接コンパイルし、tailwindcss.com ドキュメントを Next.js + Turbopack で計測した例ではビルド 932ms から 429ms（約 2.17 倍）と報告されている。Turbopack の webpack ローダー互換層でも恩恵がある。
  • 論理プロパティ: mbs-* / mbe-* / pbs-* / pbe-*、スクロール余白・ボーダーの block 軸、inline-* / block-* と min/max、inset-s-* / inset-e-* / inset-bs-* / inset-be-*。従来の start-* / end-* は inset-s-* / inset-e-* へ非推奨。
  • font-features-* で font-feature-settings を直接指定可能（tabular numbers などは既存の高レベルユーティリティを優先）。
js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "@tailwindcss/webpack"],
      },
    ],
  },
};

v4.2 の論理プロパティと font-features-* は Netflix および Vercel との Partners Program 経由の協業由来とされている。

最新版は npm で CLI・Vite・PostCSS・webpack 各パッケージを揃えて更新する。

bash
npm install tailwindcss@latest @tailwindcss/cli@latest

#参考文献