Tailewind v4 にちゃんと目を通しておく

https://tailwindcss.com/docs/v4-beta

既存のプロジェクトはCLIで移行した

新規だとViteかPostCSSで、入れ方が以前と変わっている

ビルドが早くなった

The most impressive improvement is on incremental builds that don’t actually need to compile any new CSS — these builds are over 100x faster and complete in microseconds. And the longer you work on a project, the more of these builds you run into because you’re just using classes you’ve already used before, like flex, col-span-2, or font-bold.

嬉しい

設定がCSSになった。デザイントークンは全てCSS変数で取り扱うようになり、嬉しい。UIライブラリとの連携も断然シンプルになるはず。

@layer が ネイティブのものに代わったらしい。

but native cascade layers can do things that we couldn’t easily replicate at build-time, like isolating styles within a layer even if they have a higher specificity than styles in another layer.

自動検知と手動の@sourceで対象検知。
自動検知はどういうアルゴリズムでやってるんだろう。

Production Build で Lightning CSS を利用。Rust 製の Build ツールにリプレイスする流れがここにも。
https://lightningcss.dev/

theme に無い値を設定するときに[]が要らなくなったらしい。これはどうだろう、テーマから外れた箇所に気づきづらくてイマイチな気がする。

In v4.0, we’ve really slimmed down the amount of theme configuration you need to do, especially for things that aren’t really design tokens.

spacing は 単に 「0.25rem の何倍か」で計算されるようになったらしい？デザインシステムというよりはEasyなCSSとしてのツールに向かっているね

デフォルトのカラーパレットが oklch に。
誰かいい加減こいつの発音を教えてくれ（頭の中ではオークリッチって読んでる）。

container query のデフォルトサポート
しかも min/max構文なんてあるんだ、つよい

  <div class="flex @min-md:@max-xl:hidden">

3d animation のための utility が大量入荷

bg-gradient-* から bg-linear-* になって、角度が書けるようになった

<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div>

conic, radial グラデーションの追加。3d 関連と合わせて表現力が増した感じ。

inset-shadow, inset-ring の追加。おー。

color-scheme 追加

Throw scheme-light dark:scheme-dark on your html or body element and your scrollbars will always look good, no matter which dark mode strategy you use.

starting 追加。うれしい。

The new starting variant adds support for the new CSS @starting-style feature, making it possible to transition element properties when an element is first displayed:

not 追加。こういうのもできるのか。

<div class="not-supports-[display:grid]:flex">

nth, in も追加
すごい、不満がどんどん減ってく

popover-open を open で対応した件、ウケる

I’m sure I’m eventually going to regret not making it a separate popover-open variant but I thought really hard about it and couldn’t think of any situations where an element would use both [open] and :popover-open and have different styles for each condition. Someone is going to update the spec and screw me on this one down the road though for sure.

そもそも子要素適用できるのすら知らんかったけど

<ul class="*:p-4">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

**で再帰的にいけるらしい

<div class="**:data-avatar:rounded-full">

prefix が variant チックになったらしい

@import "tailwindcss" prefix(tw);

<div class="tw:flex tw:bg-red-500 tw:hover:bg-red-600">

カスタム utility, カスタム variant はそれぞれ @utility @variant

v3からの変更点も簡潔にまとめられてて助かる

v4 より素直に、より速く、そして表現力がより高くなった感じ。
[] の件だけ気になる。spacing もか。