工作中同僚が突然チャットで言った：Tailwind v3.3 の新機能は素晴らしいね、行の高さとフォントサイズを 1 つのクラスで設定できるようになったんだ。それで、Tailwind のアップデートをチェックしてみたんだけど、長く話さずにまとめを紹介するよ～
Tailwind CSS v3.3 は 2023 年 3 月 28 日にリリースされました。これは非常に素晴らしいバージョンであり、多くの新機能と改善点をもたらし、開発をより効率的かつ柔軟にします。この記事では、いくつかの最もエキサイティングな新機能を紹介します。
- ダークカラーパレットの拡張：拡張されたカラーパレットには、各色により深い 950 の階調が追加されました。現在、11 の色調があります。例：
bg-slate-950
-
ESM と TypeScript のサポート：ESM と TypeScript の設定ファイルをサポートし、Tailwind CSS をモダンな構文と型チェックで設定できるようにします。
-
グラデーションの色停止位置の微調整：グラデーション効果を正確に制御できるようにし、グラデーションの色の各色停止位置を指定できます。例：
from-5%、via-35%、to-85%
- 即座に使用できる Line-clamp：プラグインなしで複数行のテキストを切り詰めることができます。例：
line-clamp-3。
2 年以上前に公式の line-clamp プラグインをリリースしましたが、それは奇妙な廃止予定の - webkit-* のものを使用していますが、すべてのブラウザで動作し、永久に有効ですので、フレームワーク自体に統合することにしました。
- 🌟フォントサイズと行の高さの短縮記法：非常に便利で、1 つのクラスでフォントサイズと行の高さを設定できます（プリセットにない場合）。例：
text-lg/7、text-sm/[17px]、text-[20px]/[24px]
-
var () を使用しない CSS 変数：CSS 変数をサポートする省略記法で、var () 関数を使用せずに任意の値を使用できます。以下のように使用します：
変更前:bg-[var(--brand-color)]
変更後:bg-[--brand-color] -
設定可能な font-variation-settings：font-variation-settings の設定をサポートし、font-* ユーティリティクラスを使用してフォントの変化を直接設定できるようにします。
-
🌟新しい list-style-image ユーティリティクラス：非常に便利で、リストアイテムのマーカーとして画像を使用したい場合に使用できる新しい
list-image-*ユーティリティがあります。例：list-image-[url(carrot.png)]
- 🌟新しい hyphens ユーティリティクラス：ハイフンの使用方法を微調整するためのユーティリティクラスです。
HTML エンティティの を知っていますか？これらの hyphens-* ユーティリティクラスをサポートする前に、私たちはそれを知りませんでした。
hyphens-manual と注意深く配置された を使用することで、ブラウザに単語を複数行にまたがって分割する場所を指示できます。
- 🌟新しい caption-side ユーティリティクラス：テーブル内のキャプション要素の配置を制御するためのユーティリティクラスで、テーブルにキャプションを追加し、位置を設定できます。詳細はCaption Sideを参照してください。
caption-bottomはキャプション要素をテーブルの上部に配置します。caption-bottomはキャプション要素をテーブルの下部に配置します。
これらはすべて、最も目立つ新機能の一部です。詳細や改善点については、完全なリリースノートをご覧ください。v3.3 にすぐにアップグレードしたい場合は、npm から最新の tailwindcss パッケージをインストールするだけです：
npm install -D tailwindcss@latest
また、Tailwind Playですべての新機能をオンラインで体験することもできます。