こんにちは、虎の穴ラボ Advent Calendar 2021 - Qiita 3日目の記事です。

2日目は「T.M」さんによる MetaworkでRails開発のデバッグをしてみよう！でした。

4日目は「Y.S」さんが DenoのFFIでMySQLに接続するの記事を書かれる予定です。

はじめに

Tailwind CSS v3.0 の alpha1 が 10/2、alpha2 が 11/8 に公開されました。

今回は、その中からよく使われそうな注目の新機能を５つ厳選して、ご紹介しようと思います。

最新の Tailwind CSS がどのような機能を実装するか、興味がある方の参考になれば、、、と思います。

Tailwind CSS Ver3.0 は 12/9 (木) にリリースされる予定です。
🤞🥵 pic.twitter.com/f700zq04wh
— Adam Wathan (@adamwathan) 2021年12月6日

Tailwind CSS Ver3.0 がリリースされました。 tailwindcss.com

Tailwind CSS とは？

ユーティリティ・ファーストの低レベルな CSS ライブラリです。

ユーティリティ（CSSクラス）を組み合わせて、オリジナルの UI やデザインシステムを作ることができるライブラリです。

設定ファイルを変更することで、 Tailwind CSS のほぼ全てをカスタマイズできるため、さまざまな UI やデザインにユーティリティ（CSSクラス）の機能を合わせることができます。

また、CSSのクラス名を考える必要がないため、効率よくオリジナルの UI を構築することができます。

ご注意！

Tailwind CSS v3.0 は、2021/11/30 現在、alpha版です。本番環境での利用は非推奨です。
Tailwind CSS v3.0 の alpha2 時点の情報であり、正式版がリリースされる際には、alpha2 版の機能と異なる可能性があります。

動作環境

Tailwind PLAY を開いて、右上のバージョンを「v3.0.0-alpha2」にすると、Tailwind CSS v3.0 の alpha2 を気軽に試すことができます。

この記事で紹介する Just-in-Time CDN build や Just-in-Time Mode 以外の機能を試すことができます。

新規機能の中から５選をご紹介！

alpha.1 alpha.2 で追加された機能の中から、よく使われそうな 5 つ？を厳選してまとめました。

Just-in-Time Mode が正式版になります
Just-in-Time CDN build 機能が追加されます
拡張カラーパレットがデフォルトになります
flex-basis ユーティリティが追加されます
任意の値に負の値を指定したときの動作が改善されます
width、height の値に fit-content が設定できるようになります

すみません、紹介したい機能がありすぎて５つに収まりませんでした🙏

1. Just-in-Time Mode が正式版になります（alpha1 の新機能）

Tailwind CSS v3.0 から Just-in-Time Mode が正式版になり、常に有効化される予定です。

Just-in-Time Mode とは

Just-in-Time Mode は Tailwind CSS v3.0 より前の Tailwind CSS v2.1 で新たに追加されたプレビュー機能です。 Tailwind CSS v3.0 から正式版になり、常に有効化される予定です。

Just-in-Time Mode は、全ての Tailwind CSS のユーティリティを事前にビルドするのではなく、テンプレート（ HTML や JS、 Vue、JSX ）で利用されているユーティリティのみを、Tailwind CSS で検出して事前にビルドして生成するモードです。

Just-in-Time Mode について、より詳しい情報はこちらの記事（Tailwind CSSのJust-in-Time Mode専用の機能（14個）をまとめてみた）にまとめています。

正式版への移行に伴う注意事項

tailwind.config.js の purge が content に変わります。

従来は、PurgeCSS を内部で使用していたため、purge でしたが、Just-in-Time Mode は PurgeCSS を内部で使用していないため、content に変わります。

基本的には、下記のように purge を content に変えるだけで、機能します。

v3.0 以前の書き方

// tailwind.config.js
module.exports = {
  purge: {
    enabled: true,
    content: ['./src/**/*.html' /* ... */],
    safelist: [
      'bg-blue-500',
      'text-center',
      'hover:opacity-100',
      'lg:text-right',
    ],
    transform: {
      md: (content) => {
        return remark().process(content)
      }
    },
    extract: {
      md: (content) => {
        return content.match(/[^<>"'`\s]*/)
      }
    }
  },
  // ...
}

v3.0 以降の書き方

// tailwind.config.js
module.exports = {
  // purge を content に変更
  content: {
    // purge 内の content は files へ変更
    files: ['./src/**/*.html' /* ... */],
    transform: {
      md: (content) => {
        return remark().process(content)
      },
    },
    extract: {
      md: (content) => {
        return content.match(/[^<>"'`\s]*/)
      },
    },
  },
  // safelist は、直下へ移動
  safelist: [
    'font-bold',
    'text-center',
    // pattern と variants が指定できるようになります
    { pattern: /bg-(red|blue|green)/, variants: ['hover', 'focus'] },
  ],
}

2. Just-in-Time CDN build 機能が追加されます（alpha1 の新機能）

Tailwind CSS のすべての機能が、ビルド不要（ CDN からの配信）で利用できるようになります。

今まで Just-in-Time Mode を利用したり Tailwind CSS の設定ファイルをカスタマイズするためには、npm install などで、インストールが必要でした。

使用方法は、下記のように HTML の head タグ内に Tailwind CSS の読み込みなどを追加する形になります。

<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Just-in-Time CDN build のサンプル</title>
       <!-- Tailwind CSS のみ使用する場合のscript読み込み -->
       <script src="https://cdn-tailwindcss.vercel.app/"></script>
       <!-- Tailwind CSS + 公式プラグインを使用する場合のscript読み込み -->
       <!-- <script src="https://cdn-tailwindcss.vercel.app/?plugins=forms,typography,aspect-ratio,line-clamp"></script> -->
       <!-- Tailwind CSS をカスタマイズしたい場合は、下記のように設定ファイル内容を記載 -->
       <script>
           tailwind.config = {
               theme: {
                   extend: {
                       colors: {
                           tomato: 'tomato',
                       },
                   },
               },
           }
       </script>
       <!-- Tailwind CSS の機能を使って、カスタム CSS を追加したい場合は、下記の type="text/tailwindcss" を追加 -->
       <style type="text/tailwindcss">
            body {
                @apply bg-pink-500;
            }
        </style>
   </head>
    <body>
        <!-- ここに Tailwind CSS で HTML が書けます -->
    </body>
</html>

この Just-in-Time CDN build は、MutationObserver の DOM の監視機能を使って、すべてのクラスを追跡する JS ライブラリを作成することで、実現されています。

これにより、93kB で Tailwind CSS のすべての機能が使用できるようになりました。

注意事項

Just-in-Time CDN build は開発時の検証や、気軽に実行できるコードの共有などでの使用を、目的としています。

MutationObserver により Tailwind CSS のクラスを追跡し、クラスを生成する JS ライブラリがページがレンダリングされる際に動くので、レンダリングされるまでに 100 ミリ秒以上のオーバーヘッド（遅延）が発生するためです。

本番で利用では余計なオーバーヘッドが生まれるため、利用しないようにしましょう。

3. 拡張カラーパレットがデフォルトになります（alpha1 の新機能）

Tailwind CSS v3.0 以前のデフォルトのカラーパレットに、Tailwind CSS の拡張カラーパレットが統合・整理されて、Tailwind CSS v3.0 以降に実装されます。

下記は、v3.0 以前のデフォルトと、拡張、v3.0 以降のカラーパレットの対応表です。v3.0 以前のデフォルトのカラーパレットから比べると、新たに 14 色が追加されます。

カラーパレット対応表の凡例

🚨は、Tailwind CSS v3.0 以前のデフォルトのカラーパレットから v3.0 以降に移行する場合に置き換えが必要な色です
⚡️ は、拡張カラーパレットを利用していた場合に置き換えが必要な色です

カラーパレット対応表

v2 デフォルト	v2 拡張	v3
transparent	該当なし	transparent
current	該当なし	current
black	black	black
white	white	white
該当なし	blueGray	slate ⚡️
gray	coolGray	gray ⚡️
該当なし	gray	zinc 🚨
該当なし	trueGray	neutral ⚡️
該当なし	warmGray	stone ⚡️
red	red	red
該当なし	orange	orange
yellow	amber	amber 🚨
該当なし	yellow	yellow
該当なし	lime	lime
green	emerald	emerald 🚨
該当なし	green	green
該当なし	teal	teal
該当なし	cyan	cyan
該当なし	sky	sky
blue	blue	blue
indigo	indigo	indigo
purple	violet	violet 🚨
該当なし	purple	purple
該当なし	fuchsia	fuchsia
pink	pink	pink
該当なし	rose	rose

4. flex-basis ユーティリティが追加されます（alpha2 の新機能）

flex-basis はフレックスアイテムの主要部分の初期の寸法を設定するユーティリティです。 flex-basis が設定されてない要素は、自動的に伸縮します。

また、下記のように数値指定に矛盾があったり、大きな値指定をしても、親要素内に収まります。

<div class="p-2 space-y-4">
  <div class="border-2 p-2 flex w-96">
    <!-- 合計すると 100% になるように basis を指定する -->
    <div class="p-2 bg-red-400 basis-1/3"><img src="https://www.pakutaso.com/shared/img/thumb/RD2020322E119_TP_V4.jpg" /></div>
    <div class="p-2 bg-red-400 basis-1/3"><img src="https://www.pakutaso.com/shared/img/thumb/RD2020322E119_TP_V4.jpg" /></div>
    <div class="p-2 bg-red-400 basis-1/3"><img src="https://www.pakutaso.com/shared/img/thumb/RD2020322E119_TP_V4.jpg" /></div>
  </div>
  <div class="border-2 p-2 flex w-96">
    <!-- 合計して 100% を超えるように basis を指定しても、親要素内に収まる -->
    <div class="p-2 bg-red-400 basis-3/4"><img src="https://www.pakutaso.com/shared/img/thumb/RD2020322E119_TP_V4.jpg" /></div>
    <div class="p-2 bg-red-400 basis-3/6"><img src="https://www.pakutaso.com/shared/img/thumb/RD2020322E119_TP_V4.jpg" /></div>
    <div class="p-2 bg-red-400 basis-3/4"><img src="https://www.pakutaso.com/shared/img/thumb/RD2020322E119_TP_V4.jpg" /></div>
  </div>
  <div class="border-2 p-2 flex w-96">
    <!-- 親要素の横幅の 96 （24rem） を超えるように basis を指定しても、親要素内に収まる -->
    <div class="p-2 bg-red-400 basis-96"><img src="https://www.pakutaso.com/shared/img/thumb/RD2020322E119_TP_V4.jpg" /></div>
    <div class="p-2 bg-red-400"><img src="https://www.pakutaso.com/shared/img/thumb/RD2020322E119_TP_V4.jpg" /></div>
    <div class="p-2 bg-red-400 basis-96"><img src="https://www.pakutaso.com/shared/img/thumb/RD2020322E119_TP_V4.jpg" /></div>
  </div>
</div>

play.tailwindcss.com

flex-basis の値には、本来は fill、max-content、min-content、fit-content、content も指定できますが、最新の Safari で正しく動作しないため、今回の追加は見送られています。

5. 任意の値に負の値を指定したときの動作が改善されます（alpha2 の新機能）

任意の値とは？

Tailwind CSS v2.1 以降の Just-In-Time Mode を利用すると、角括弧表記を使用して、ユーティリティに任意の値を指定できます。

任意の値について、より詳しい情報はこちらの記事（Tailwind CSSのJust-in-Time Mode専用の機能（14個）をまとめてみた）にまとめています。

負の値を指定したときに、改善される動作の概要

いままでは、負の記号を角括弧の中（ mt-[-500px] ）に記述する必要がありました。

Tailwind CSS v3.0 以降は、下記の表の様に先頭に負の記号（-）を記載しても、負の値が動くようになります。

クラス	CSS
`-mt-2`	`margin-top: -0.5rem`
`-mt-[5px]`	`margin-top: -5px`
`-mt-[-10px]`	`margin-top: 10px`
`-mt-[var(--whatever)]`	`margin-top: calc(var(--whatever) * -1)`
`-mt-0`	`margin-top: 0`
`-mt-auto`	autoは無視されます

6. width、height の値に fit-content が設定できるようになります（alpha2 の新機能）

width/height、max-width/max-height、min-width/min-height の値に新しく fit（fit-content） が指定できるようになりました。

fit-content は、コンテンツ中身を要素の最大や最小の大きさに合わせる際に使用します。

クラス	CSS
w-fit	width: fit-content;
max-w-fit	max-width: fit-content;
min-w-fit	min-width: fit-content;
h-fit	height: fit-content;
max-h-fit	max-height: fit-content;
min-h-fit	min-height: fit-content;

例えば、下記のようにコンテンツ中身を要素の大きさに合わせる指定が容易になります。

<div class="p-2 space-y-4">
  <!-- fitなし -->
  <div class="border-2 p-2 w-72 space-y-2">
    <div class="p-2 bg-red-400">短いテキスト。</div>
    <div class="p-2 bg-red-400">少し長いテキストです。</div>
    <div class="p-2 bg-red-400">長めのテキスト、今日の天気は晴れ、気温が低くて寒い日になるでしょう。また突然の雪に注意してください。</div>
  </div>
  <!-- fitあり -->
  <div class="border-2 p-2 w-72 space-y-2">
    <div class="p-2 bg-red-400 w-fit">短いテキスト。</div>
    <div class="p-2 bg-red-400 w-fit">少し長いテキストです。</div>
    <div class="p-2 bg-red-400 w-fit">長めのテキスト、今日の天気は晴れ、気温が低くて寒い日になるでしょう。また突然の雪に注意してください。</div>
  </div>
</div>