編集

Tailwind CSS v4

#Tailwind CSS

Tailwind CSS v4 がリリースされた。

https://tailwindcss.com/blog/tailwindcss-v4

多くの新機能や新たなユーティリティやバリアント、構成の変更などを含んでいる。

構成が変更されているため、そのままバージョンを上げて使うことは出来ない。 マイグレーションガイドの一読が必要。

https://tailwindcss.com/docs/upgrade-guide

以下に、一部の新機能を紹介する。

#CSS-first configuration

tailwind.config.js の代わりに CSS ファイル内で@themeルールを利用して設定を行うことが出来る。

postcss
@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";

  --breakpoint-3xl: 1920px;

  --color-pikachu-100: #f4e66b;
}

#@starting-style support

@starting-styleをサポートしたstarting variant が追加された。

html
<div>
  <button popovertarget="my-popover">Check for updates</button>
  <div
    popover
    id="my-popover"
    class="transition-discrete starting:open:opacity-0 ..."
  >
    <!-- ... -->
  </div>
</div>

#not variants

:not()疑似クラスをサポートしたnot variant が追加された。

html
<div class="not-hover:opacity-75">
  <!-- ... -->
</div>

#ユーティリティの削除や変更

非推奨なユーティリティ*-opacity-*やflex-shrink-*、overflow-ellipsiesなどが削除された。

https://tailwindcss.com/docs/upgrade-guide#removed-deprecated-utilities

また、一貫性を高めるためにユーティリティの役割や名前の変更も行われている。 shadowやblurなどはshadow-smやblur-smに変更され、元々shadow-smやblur-smであったものはshadow-xsやblur-xsに変更された。

https://tailwindcss.com/docs/upgrade-guide#renamed-utilities

編集