Tailwind CSS v4 で導入される CSS First Configurations

Article

更新あり

2024/12/01 00:20

ずんスレ主

Tailwind CSS v4で「CSS First Configurations」って何なのだ？なんか名前だけ聞くとすごそうなのだ。

でぇじょうぶ博士

それは、今まで`tailwind.config.js`で設定していたテーマやカスタマイズを、直接CSSファイル内に書けるようになる機能でやんす！これにより、JavaScriptの呪縛から解放されるでやんすよ。

やきう

呪縛て。お前、そんな大げさなこと言うなや。ワイら普通に`config.js`使っとったけど、不便感じたことないわ。

でぇじょうぶ博士

いやいや、それが大問題だったんでやんすよ。例えば他のライブラリと統合する時、JS経由じゃ面倒だったりしたでやんす。でもv4ではCSS変数として`

ずん

えっ、それってつまりボクでも簡単にテーマ変更とかできちゃうってことなのだ？

でぇじょうぶ博士

その通りでやんす！しかもnamespace付きのCSS変数だから、一部だけ上書きすることも可能なんでやんす。「--color-primary」とか「--font-size-base」みたいにね。

やきう

はいはい。でも結局、「ダークモード」とかどうなるねん？また新しい設定覚えなあかんのちゃうか？

でぇじょうぶ博士

ダークモードは引き続き`.dark`クラスを使えばOKでやんす。ただし、新しい@variantディレクティブを使えばもっと柔軟な切り替えが可能になるらしいでやんすよ。

ずん

ボク的には「source()関数」が気になるのだ。テンプレートファイル自動検出って便利そうだけど、本当にちゃんと動くのかな？

やきう

お前がテンプレート管理とか考えるタイプちゃうやろ。どうせ適当にコピペして終わりちゃうか？

ずん

…それは否定できないけど！でもこれなら少し頑張れる気がするのだ！

でぇじょうぶ博士

頑張れるというより、むしろ楽になる仕組みなんで安心するでやんす。それこそTailwind CSS v4の目指しているところなんだから！

ずん

よーし！じゃあボクも次回プロジェクトではこの「CSS First Configurations」を導入して…誰か代わりに設定お願いするのだ！

人気記事