Tailwind CSSの v3.0.0-alphaを試してみた

Tailwind CSS v3.0.0のalpha版がプレリリースされたので、新機能や変更点などを試してみたメモです。

https://github.com/tailwindlabs/tailwindcss/releases

viteとVue3を使用して簡単に環境構築をして検証しています。以下検証用のリポジトリです。

https://github.com/K-shigehito/tailwind3-preview

※本記事の内容は2021/11/16時点のv3.0.0-alpha.2についての内容です。プレリリースの為、内容の変更や問題が発生する場合がありますのでご注意ください。正式なリリースも遠くないようなので、その時に改めてまとめてみたいと思っています（Zennで書きたい...）。

インストールと設定ファイル

tailwindcss@nextでalpha版がインストールできます。現状の最新バージョンは3.0.0-alpha.2となっています。

$ npm install -D tailwindcss@next postcss@latest autoprefixer@latest

以下コマンドで設定ファイルが生成されます。

$ npx tailwindcss init -p

生成されるtailwind.config.jsの中身が変わっていました。

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

pergeがなくなって代わりにcontent内に記述します。

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

現状では従来のようにperge内に記述しても動作しましたが、contentに書いていったほうが良さそうです。

以下引用です

We've tried really hard to make Tailwind smart enough to understand the old configuration as well, so with any luck your existing configuration should still work, but you'll want to update to the new format to silence the annoying console warnings we blast you with.

Just-in-Time, all the time

JITモードが新しくなり、常にJITモードで動作するようになっています。今までのように設定ファイルへmode: 'jit'の記述が不要となります。またこれによって、パフォーマンスの向上も図られているようです。

Just-in-Time CDN build

CDNでもJITモードが利用できるようになっています。Tailwindの全ての機能を利用でき、ファイルサイズも抑えられています。headタグ内で設定のカスタマイズもできるようになっています。

※Just-in-Time CDNは開発のみを目的としている為、本番環境での使用は非推奨となっているようです。

Every color by default

v2までは追加の色を使用する場合は設定ファイルに記述する必要がありましたが、デフォルトで全ての色が使用できるようになっています。

８種類80色 → 22種220色程がデフォルトで用意されています（グレーだけで50色あります！）。

※一部色名が変更されていて、v2からバージョンアップする際は書き換えが必要になるものがあります。以下詳細です。

https://github.com/tailwindlabs/tailwindcss/pull/5384

新しいutilities

新しいutilitie classも追加されているので、いくつか試してみました。

新規utilitie class

• aspect-ratio

アスペクト比を保って要素をレスポンシブに対応させるクラスです。（以下、元のcss同様にブラウザ非対応のものを含みます：Can I use）

// 例
<img class="aspect-[16/9]"/>

// css
aspect-ratio: 16 / 9;

tailwind PLAYで作成したデモです：aspect-ratio

tailwind PLAY内でv2とv3を切り替えるとバージョン間の差分が簡単に可視化できて凄いです。（以降、可能なものはプレビューを載せています）

• scroll-snap

scroll-snap-type scroll-snap-align scroll-snap-stop scroll-margin scroll-padding の各プロパティに対応するクラスが用意され、スクロールスナップが制御できるようになっています。

// 例
<div
  class="
    flex
    gap-[20px]
    items-center
    overflow-x-auto
    w-[500px]
    mt-[12px]
    snap-x snap-mandatory
  "
>
  <div
    class="
      flex-shrink-0 flex
      items-center
      justify-center
      w-[300px]
      h-[100px]
      bg-blue-200
      snap-start
    "
  >
    snap-start
  </div>
  // ...略
</div>

tailwind PLAY：scroll-snap

cssのscroll-snapについては以下の解説がわかりやすかったです。

CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説

• scroll-behavior

scroll-behaviorプロパティに対応するスタイルです。簡単にsmooth scrollが実装でるようになっています。

// 例
<nav class="flex gap-[12px] mb-[40px]">
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>

<div class="h-[280px] w-[280px] scroll-smooth overflow-y-scroll">
  <div id="page-1" class="w-[200px] h-[200px] bg-blue-200">1</div>
  <div id="page-2" class="w-[200px] h-[200px] mt-[20px] bg-pink-200">2</div>
  <div id="page-3" class="w-[200px] h-[200px] mt-[20px] bg-yellow-200">
    3
  </div>
</div>

• accent-color

radioボタンやチェックボックス等のフォームのアクセントの色を指定できます。

// 例
<div class="accent-red-500 text-[20px]">
  <div class="font-bold">radio</div>
  <div>
    <input id="huey" type="radio" name="drone" value="huey" checked />
    <label for="huey" class="ml-[4px]">Huey</label>
  </div>
  <div class="accent-indigo-500">
    <input id="dewey" type="radio" name="drone" value="dewey" />
    <label for="dewey" class="ml-[4px]">Dewey</label>
  </div>
  <div class="accent-amber-500">
    <input id="louie" type="radio" name="drone" value="louie" />
    <label for="louie" class="ml-[4px]">Louie</label>
  </div>
</div>

tailwind PLAY：accent-color

• text-indent

テキストの１行目のインデントを操作するクラスです。負数も使用できるようになっています。

// 例
<div class="flex gap-[40px] w-[400px] text-[18px]">
  <div class="indent-[1em]">
    一行目のインデントが"1em"となります。
  </div>
</div>

tailwind PLAY：text-indent

• border-x / border-y

border-xがborder-lとborder-rを、border-yがborder-tとborder-bを同時に指定できます。

// 例
<div
  class="mt-[12px] p-[8px] w-[200px] text-center border-x-2 border-x-blue-500"
>
  border-x
</div>
<div
  class="mt-[12px] p-[8px] w-[200px] text-center border-y-2 border-y-red-500"
>
  border-y
</div>
<div
  class="
    mt-[12px]
    p-[8px]
    w-[200px]
    text-center
    border-x-4 border-x-blue-500 border-y-2 border-y-red-500
  "
>
  border-x and border-y
</div>

tailwind PLAY：border-x / border-y

• column

columns プロパティに対応するクラスです。gapやclumサイズも簡単に調整でき、レスポンシブにも対応しています。

 // 例
<h2 class="font-bold text-[24px]">column</h2>
<div class="columns-md gap-x-6">
  レスポンシブに段落数が変化します。gapの指定で段間の調整も簡単に行えます。
</div>

tailwind PLAY：column

• flex-basis

flex-basisプロパティに対応するクラスです。

// 例
<div class="flex w-full">
  <div class="flex flex-grow basis-3/6 h-[100px]">3/6</div>
  <div class="flex flex-grow basis-2/6 h-[100px]">2/6</div>
  <div class="flex flex-grow basis-1/6 h-[100px]">1/6</div>
</div>

tailwind PLAY：flex-basis

• touch-action

touch-action プロパティに対応するクラスです。

https://developer.mozilla.org/ja/docs/Web/CSS/touch-action

• will-change

will-change プロパティに対応するクラスです。

https://developer.mozilla.org/ja/docs/Web/CSS/will-change

追加と変更

• min/max-width/heightプロパティの値にfit-contentとmin/max-contentが追加されています。

tailwind PLAY：min/max-width/height

• cursorプロパティにデフォルトで使用できる値が追加されています。

v2ではデフォルトで使用できる値が8種類ほどでしたが、progressやgrabなどが追加されています（確認しただけでも36種類ありました...！）。

tailwind PLAY：coursor

• grow- / shrink- がそれぞれflex-grow- / flex-shrink- のエイリアスとなり、flex-grow- / flex-shrink- は非推奨となるようです（現状まだ使えはするようです）。
• fillとstroke utilitiesで全てのカラーパレットの色が使えるようです。
• box shadowに色の指定ができるようになっています。

tailwind PLAY：box-shadow

variant

• print variant がデフォルトで使用できるようになっています。

// 例
<div class="text-indigo-800 print:text-black">
  色文字がプリント時は墨になる
</duv>

tailwind PLAY：print

（これもプレビューできた...凄）

• open variant が追加されています。

// 例
<details class="text-left m-[16px] open:text-red-500">
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

tailwind PLAY：open

• file variant が追加されています。

まとめ

新規のクラスも多数追加されていてより便利になっている印象です。設定ファイルなども変更が最小限になっていて、移行もそんなに大変ではないのではないかと感じました（現状、私がそんなに複雑な使い方をしていないので分かりませんが...）。

個人的にbox-shadowの部分にこだわりが感じられて、グッときました。

→https://github.com/tailwindlabs/tailwindcss/pull/5979

まだ追加があるかもしれませんが、改めてまとめられたらよいなと思います。