🍃

tailwindcss v3.3.0リリース！新機能を試してみよう！

2023/03/30に公開

CSS

Tailwind CSS

frontend

tech

最近、tailwindcss v3.3.0がリリースされました。このマイナーチェンジにより、より良いユーティリティクラスが追加されたため、これについて触れてみます。

この記事では、公式ブログから引用しながら、tailwindcss v3.3.0の新機能や改善点について紹介していきます。公式ブログは以下のURLからアクセスできます。

実際にコーディングして見たい方は、以下のリンクからできます。
https://play.tailwindcss.com

暗色の追加

暗色系のUIを構築している方に朗報です。

tailwindcss v3.3.0では、全ての色で 900までのシェードが、950まで拡張されました。 これにより、より精密なデザインを実現できます。

カスタムカラーについては、以下のドキュメントをご覧ください。

公式ブログには、次のように書かれています。

Believe it or not the hardest part about this project was convincing ourselves to be okay with having 11 shades per color. Trying to make that look good in the color palette documentation was a nightmare.

引用にあるように、1色につき11段階のシェードを用意するのが最も難しかったと書かれています。ドキュメントを作るとき、とても大変だったとのことです。

ESMとTypeScriptのサポート

以前のバージョンでは、設定ファイルはCommonJS形式でのみ書かれていましたが、tailwindcss v3.3.0からはESM形式とTypeScriptにも対応しました。

これにより、より柔軟な設定が可能になり、より多くの開発者がtailwindcssを使用できるようになりました。詳細については、公式ドキュメントをご覧ください。

LTR・RTLの論理プロパティ追加

左から右、右から左の余白を調整する際に、従来はmargin-leftやmargin-rightなどの物理プロパティを使用していました。しかし、tailwindcss v3.3.0からはLTR・RTLの論理プロパティが追加され、より簡潔な記述が可能になりました。

以下のようなコードで、簡潔に余白を設定できます。

<div class="ms-2"></div>

ここで、msはmargin-inline-startの略称で、論理プロパティを使用することで、LTRとRTLの方向性に応じた自動調整が行われます。

詳細については、公式ドキュメントのMarginセクションを参照してください。

グラデーションの各カラーストップ位置の調整

tailwindcss v3.3.0からは、グラデーションの各カラーストップ位置を細かく調整できるようになりました。

例えば、以下のようなクラスを使用することで、カラーストップの位置を0%、50%、100%に設定できます。

<div class="bg-gradient-to-r from-red-500 via-green-500 to-blue-500 bg-gradient-stops-0,50,100"></div>

このように、グラデーションを細かく設定することで、より表現力豊かなUIを構築できます。

詳細については、公式ドキュメントのGradient color stopsセクションを参照してください。

`line-clamp`の追加

tailwindcss v3.3.0からは、line-clamp機能が公式機能として組み込まれました。これまではプラグインを使用する必要がありましたが、これにより簡単にテキストの行数を制限できるようになります。

以下は、line-clamp機能を使用した例です。

<div class="line-clamp-3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut
  aliquet aliquam, nunc orci aliquet nisl, nec aliquet nunc nisl eu ante. Sed
  euismod, nunc ut aliquet aliquam, nunc orci aliquet nisl, nec aliquet nunc
  nisl eu ante.
</div>

このように、.line-clamp-{n}クラスを使用することで、テキストの行数を{n}行に制限できます。

詳細については、公式ドキュメントのLine clampセクションを参照してください。
https://tailwindcss.com/docs/line-clamp

`line-height`と`font-size`の調整

以前は、line-heightとfont-sizeを調整する場合、leading-とtext-を使用していました。

<div class="text-lg leading-7"></div>

しかし、tailwindcss v3.3.0からは、スラッシュを使用して、より簡潔に記述できるようになりました。さらに、任意の値を使用できます。

<div class="text-lg/[15px]"></div>

詳しくは、Font sizeドキュメントをご覧ください。

CSS変数の省略

CSS変数を使う際に、var(--tw-)を省略できるようになりました。

<!-- これが -->
<div class="bg-[var(--tw-gradient-from)]"></div>
<!-- こうなる -->
<div class="bg-[--tw-gradient-from]"></div>

これにより、よりシンプルなコードでCSS変数を利用できます。

`font-variation-settings`の追加

設定ファイルでfont-variation-settingsを追加できるようになりました。

module.exports = {
  theme: {
    fontFamily: {
      sans: [
        'Inter var, sans-serif',
        {
          fontFeatureSettings: '"cv11", "ss01"',
          fontVariationSettings: '"opsz" 32',
        },
      ],
    },
  },
}

`list-style-image`の追加

list-style-imageを使うことができるようになりました。これでリストマーカーに好きな画像を使うことができます。

`hyphens`の追加

英語が途中で途切れるのを防ぐために、hyphensを使うことができるようになりました。複数行にまたがる場合、ブラウザにハイフンを挿入する場所を指示できます。

https://tailwindcss.com/docs/hyphens

キャプションの追加

テーブルにキャプションを付ける際に、キャプションをトップ・ボトム配置できるようになりました。

さいごに

tailwindcss v3.3.0は、より良いユーティリティクラスが追加されているマイナーチェンジです。
個人的にline-clamp、line-heightの調整、論理プロパティの追加が嬉しいです。

今後も、tailwindcssの機能が充実していくことを期待しています。

暗色の追加

ESMとTypeScriptのサポート

LTR・RTLの論理プロパティ追加

グラデーションの各カラーストップ位置の調整

line-clampの追加

line-heightとfont-sizeの調整

CSS変数の省略

font-variation-settingsの追加

list-style-imageの追加

hyphensの追加