大幅にパワーアップした Tailwind CSS v3.0 を試す

こんにちは森田です。
今回は先月リリースされた Tailwind CSS v3.0 を試してみたいと思います。

Tailwind CSS は Utility-First（ユーティリティファースト）で作られている CSS フレークワークです。
Tailwind CSS の基本的な解説は以前記事にしておりますのでこちらをご覧ください。

Tailwind CSS v3.0 の新機能とは

JITエンジンの標準化

何をおいてもこれにつきますが、JIT(Just-in-Time) エンジンが標準化されました。

Tailwind CSS v2.1 からプレビュー扱いでJITモードを使うことができたコンパイラエンジンですが、v3 は JIT モードが標準となり v2 までの AOT(Ahead of Time) から置き換えられました。

v2 までは事前に用意された大量のユーティリティ CSS から使わないものを PurgeCSS で削除し、使うものだけを残すという方式でしたが、v3 よりhtmlの class をパースし使用しているクラスのみCSSをコンパイルします。

これにより大幅なパフォーマンス向上がなされコンパイルの高速化、任意の値の設定など非常に便利な機能が追加されました。

また、 v2 では開発環境と本番環境に CSS の差異があったのですが v3 からは統一されて

他にも色の追加やボックスシャドウ、複数カラムレイアウトやアスペクト比のプロパティなどさまざまな機能も追加されました。

Tailwind CSS v3.0を試す

公式ブログを参考に新機能を試してみたいと思います。

Tailwind CSS v3.0 は tailwind play でブラウザで簡単に試すことができます！

任意の値

JITエンジンになり任意の値を指定することができるようになりました。

<div class="top-[117px]">
  <!-- ... -->
</div>

値をブラケットで囲うことで任意の値を指定します。
top: 117px が書き出されます。

<div class="bg-[#bada55] text-[22px] before:content-['Festivus']">
  <!-- ... -->
</div>

背景色、フォントサイズ、疑似要素コンテンツなども使えます。

任意のプロパティ

Tailwind CSS がサポートしていないプロパティもブラケットで囲うことで指定できるようになりました。

<div class="[mask-type:luminance] hover:[mask-type:alpha]">
  <!-- ... -->
</div>

マルチカラム

columns プロパティを使えるようになりました。
ハイフン繋ぎで列を指定することでマルチカラムレイアウトを指定できます。

<div class="columns-1 sm:columns-3 ...">
  <p>...</p>
  <!-- ... -->
</div>

SP幅は1カラム、それ以上は3カラムのレイアウトを指定しています。

アスペクト比

aspect-ratio プロパティがサポートされました。

<iframe class="w-full aspect-video ..." src="https://www.youtube.com/..."></iframe>

aspect-video を指定すると aspect-ratio: 16 / 9; が指定されワイド(16:9)の比率の動画で使えます。
サンプルコードにも書いてありますが YouTube の埋め込みに使えそうです。

ポートレートとランドスケープ修飾子

portrait: および landscape: の修飾子を付けることで縦向き横向きでスタイルを切り分けることができます。

<div>
  <div class="portrait:hidden">
    <!-- ... -->
  </div>
  <div class="landscape:hidden">
    <p>
      This experience is designed to be viewed in landscape. Please rotate your
      device to view the site.
    </p>
  </div>
</div>

プリント修飾子

print: 修飾子を付けることで印刷時のスタイルを指定できます。

<div>
  <article class="print:hidden">
    <h1>My Secret Pizza Recipe</h1>
    <p>This recipe is a secret, and must not be shared with anyone</p>
    <!-- ... -->
  </article>
  <div class="hidden print:block">
    Are you seriously trying to print this? It's secret!
  </div>
</div>

まとめ

他にも色々と新機能は追加されています。追加機能の詳細は公式ブログをご参考ください。
v3.0になったことで非常に使いやすくなったTailwind CSS。今後さらに使うことが増えることになるでしょう。

関連リンク

• Tailwind CSS v3.0