はじめに
フロントエンド開発で大きな力を発揮するTailwindCSSは
ユーティリティ・ファーストで作られており、
クラス名を考えずに済み、自由自在にスタイルを組むことができます。
先日v3.0の公開がされたとのことで、使えそうな追加機能を
ピックアップしてまとめていきたいと思います。
（*全て網羅している訳ではありません。）
https://tailwindcss.com/blog/tailwindcss-v3#multi-column-layout
標準機能の追加
Just in time、通称JITはブランケットで囲うことで任意の値を設定できたり、
擬似要素が使えたりと何かと便利な機能です。
従来はtailwind.config.jsにmode: 'jit'
と追記して使用できましたが、3.0からは標準搭載となりました。
さらに拡張パレットも標準搭載
baseカラーが8→22種類に増加！
それぞれ10段階の濃淡(50〜900)から選択可能なので
合計220種類の色がデフォルトで用意されることとなります。
Multi-column layout
列数を指定し、手軽に新聞記事のようなレイアウトへ
レスポンシブにも応用できます。
aspect-ratio
defaultでビデオサイズと正方形 を用意されており、
ブランケット内に任意の比を指定することも可能
flex-basis, fit-content
フレックスアイテムの寸法を設定可能。
数値指定に誤りがあっても親要素内に収まるよう調整される。
また、Sizingにfitが追加されました。
Scroll snap API
スクロールスナップのプロパティが追加され、制御可能に！
snap-centerで、スワイプ時に要素を中央に持ってきています。