Tailwind CSS v3.1: 本気出すか？ さあ、本気出していこう！

Tailwind CSS v3.0 をリリースしてから約6ヶ月が経ちました。それ以来、コードベースに小さな改善をたくさん集めてきましたが、「よし、リリースする時が来た」と言わせるような、決定的な機能がまだありませんでした。

そして、数週間前の土曜日の夜、DiscordでRobinと話していたとき、:has とドキュメントのより深いクラスを使って html 要素をターゲットにする方法を思いつき、私が1年以上取り組みたいと思っていた任意のバリアントのサポートを追加した場合、どのように見えるかを説明しました。

20分後、Robinは動作する概念実証（たった6行のコードで！）を作成し、さらに1時間ほどJordanがクラス検出エンジンで正規表現の奇跡を起こした後、任意のバリアントが誕生し、リリースに値する機能ができました。

というわけで、Tailwind CSS v3.1の登場です！すべての修正と改善の完全なリストについては、リリースノートをご覧ください。ここではハイライトを紹介します。

• ファーストパーティのTypeScript型定義
• CLIでのCSSインポートの組み込みサポート
• theme関数使用時の色の不透明度変更
• より簡単なCSS変数カラー設定
• ボーダー間隔ユーティリティ
• 有効およびオプションのバリアント
• prefers-contrastバリアント
• ネイティブダイアログの背景をスタイル
• 任意の値をバリアントにも

tailwindcss の最新バージョンを npm からインストールして、プロジェクトをアップグレードしてください。

npm install tailwindcss@latest

または、Tailwind Play を起動して、ブラウザですぐにすべての新機能を試してみてください。

ファーストパーティのTypeScript型定義

Tailwindを使用する際に操作するすべてのJS API、特に tailwind.config.js ファイルの型定義を提供するようになりました。これは、あらゆる種類の便利なIDEサポートが得られることを意味し、ドキュメントをあまり参照せずに設定を簡単に変更できるようになります。

設定するには、設定定義の上に型注釈を追加するだけです。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

あなたがTypeScriptの大きなオタクなら、実際の型定義を調べてみると楽しいかもしれません。非常に複雑なオブジェクトをサポートするために、多くの興味深いことがそこで行われています。

CLIでのCSSインポートの組み込みサポート

CLIツールを使用してCSSをコンパイルしている場合、postcss-import が組み込まれたため、追加の設定なしにカスタムCSSを複数のファイルに整理できます。

@import "tailwindcss/base";
@import "./select2-theme.css";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

CLIツールを使用せず、TailwindをPostCSSプラグインとして使用している場合は、autoprefixer と同様に、postcss-import を自分でインストールして設定する必要があります。ただし、もし CLIツールを使用している場合は、これが完全に動作するようになります。

これは、スタンドアロンCLI を使用していて、ノードの依存関係をまったくインストールしたくない場合に特に便利です。

theme関数使用時の色の不透明度変更

これを知っている人はあまり多くないと思いますが、Tailwindは、設定ファイルから値を取得できる theme() 関数 をCSSファイルに公開しています。— それらを再利用できる変数に変えるようなものです。

.select2-dropdown {
  border-radius: theme(borderRadius.lg);
  background-color: theme(colors.gray.100);
  color: theme(colors.gray.900);
}
/* ... */

ただし、1つの制限は、この方法で取得した色のアルファチャンネルを調整できなかったことです。そこで、v3.1では、最新の rgb および hsl CSSカラー関数と同様に、スラッシュ構文を使用して不透明度を調整するサポートを追加しました。

.select2-dropdown {
  border-radius: theme(borderRadius.lg);
  background-color: theme(colors.gray.100 / 50%);
  color: theme(colors.gray.900);
}
/* ... */

tailwind.config.js ファイルの theme 関数でもこれが機能するようにしました。

module.exports = {
  content: [
    // ...
  ],
  theme: {
    extend: {
      colors: ({ theme }) => ({
        primary: theme("colors.blue.500"),
        "primary-fade": theme("colors.blue.500 / 75%"),
      }),
    },
  },
  plugins: [],
};

奇妙なカスタムグラデーションなどには本当に驚くほど便利です。— 任意の値をこれに使用することもできます。

<div class="bg-[image:linear-gradient(to_right,theme(colors.red.500)_75%,theme(colors.red.500/25%))]">
  <!-- ... -->
</div>

CSSファイルを編集することを避けるためなら何でもしますよね？

より簡単なCSS変数カラー設定

CSS変数として色を定義および設定したい場合は、tailwind.config.js ファイルにこのようなひどいボイラープレートがあるかもしれません。

function withOpacityValue(variable) {
  return ({ opacityValue }) => {
    if (opacityValue === undefined) {
      return `rgb(var(${variable}))`;
    }
    return `rgb(var(${variable}) / ${opacityValue})`;
  };
}
module.exports = {
  theme: {
    colors: {
      primary: withOpacityValue("--color-primary"),
      secondary: withOpacityValue("--color-secondary"),
      // ...
    },
  },
};

v3.1では、関数を使用する代わりに、フォーマット文字列で色を定義するサポートを追加することで、これを大幅に改善しました。

module.exports = {
  theme: {
    colors: {
      primary: "rgb(var(--color-primary) / <alpha-value>)",
      secondary: "rgb(var(--color-secondary) / <alpha-value>)",
      // ...
    },
  },
};

opacityValue 引数を受け取る関数を記述する代わりに、<alpha-value> プレースホルダーを含む文字列を記述するだけで、Tailwindがそのプレースホルダーをユーティリティに基づいて正しいアルファ値に置き換えます。

これまでにこれを見たことがない場合は、更新された CSS変数の使用 ドキュメントで詳細を確認してください。

ボーダー間隔ユーティリティ

border-spacing プロパティの新しいユーティリティセットを追加しました。これにより、個別のボーダー を使用する場合に、テーブルボーダー間のスペースを制御できます。

<table class="border-separate border-spacing-2 ...">
  <thead>
    <tr>
      <th class="border border-slate-300 ...">State</th>
      <th class="border border-slate-300 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-slate-300 ...">Indiana</td>
      <td class="border border-slate-300 ...">Indianapolis</td>
    </tr>
    <!-- ... -->
  </tbody>
</table>

あなたが考えていることはわかります— 「あんなテーブルを作りたいなんて人生で一度も思ったことがない...」— でもちょっと聞いてください！

これが実際に非常に役立つ状況の1つは、スティッキーヘッダー行を持つテーブルを構築していて、見出しの下に永続的な下ボーダーが必要な場合です。

<table class="border-separate border-spacing-0">
  <thead class="bg-gray-50">
    <tr>
      <th class="sticky top-0 z-10 border-b border-gray-300 ...">Name</th>
      <th class="sticky top-0 z-10 border-b border-gray-300 ...">Email</th>
      <th class="sticky top-0 z-10 border-b border-gray-300 ...">Role</th>
    </tr>
  </thead>
  <tbody class="bg-white">
    <tr>
      <td class="border-b border-gray-200 ...">Courtney Henry</td>
      <td class="border-b border-gray-200 ...">courtney.henry@example.com</td>
      <td class="border-b border-gray-200 ...">Admin</td>
    </tr>
    <!-- ... -->
  </tbody>
</table>

ここでは、ボーダー間にスペースを空けたくないため、border-collapse を使用できると思うかもしれませんが、それは間違いです。border-separate と border-spacing-0 がないと、ボーダーは見出しの下に固定されずにスクロールアウトします。CSSは楽しいですね。

詳細については、ボーダー間隔ドキュメントをご覧ください。

有効およびオプションのバリアント

:enabled および :optional 擬似クラスの新しいバリアントを追加しました。これらは、フォーム要素が有効およびオプションの場合にターゲットを絞ります。

「でもAdam、なぜこれらが必要になるのですか？有効とオプションは状態ですらなく、デフォルトです。あなたはウェブサイトを作ったことがありますか？」

痛いですね、なぜならそれは真実だからです—私はほとんどメールを書いているだけで、GitHubで同じ質問に何度も答えています。

しかし、この無効化されたボタンの例を見てください。

<button type="button" class="bg-indigo-500 hover:bg-indigo-400 disabled:opacity-75 ..." disabled>Processing...</button>

ボタンの上にカーソルを合わせると、無効になっているにもかかわらず、背景色がまだ変化していることに注目してください。このリリース前は、通常、次のように修正していました。

<button
  type="button"
  class="bg-indigo-500 hover:bg-indigo-400 disabled:opacity-75 disabled:hover:bg-indigo-500 ..."
  disabled
>
  Processing...
</button>

しかし、新しい enabled 修飾子を使用すると、代わりに次のように記述できます。

<button type="button" class="bg-indigo-500 hover:enabled:bg-indigo-400 disabled:opacity-75 ..." disabled>
  Processing...
</button>

ボタンが無効になっているときにホバー色をデフォルト色にオーバーライドする代わりに、hover バリアントと enabled バリアントを組み合わせて、ボタンが無効になっている場合はホバースタイルを最初に適用しないようにします。そちらの方が良いと思います！

新しい optional 修飾子を 兄弟状態機能 と組み合わせて、必須ではないフィールドの小さな「必須」通知を非表示にする例を次に示します。

<form>
  <div>
    <label for="email" ...>Email</label>
    <div>
      <input required class="peer ..." id="email" />
      <div class="peer-optional:hidden ...">Required</div>
    </div>
  </div>
  <div>
    <label for="name" ...>Name</label>
    <div>
      <input class="peer ..." id="name" />
      <div class="peer-optional:hidden ...">Required</div>
    </div>
  </div>
  <!-- ... -->
</form>

これにより、すべてのフォームグループに同じマークアップを使用し、条件付きレンダリングのすべてを自分で処理する代わりにCSSに処理させることができます。ちょっといいですよね！

prefers-contrastバリアント

prefers-contrast メディアクエリがあることをご存知でしたか？実はあります。そして今、Tailwindはそれをすぐにサポートしています。

新しい contrast-more および contrast-less バリアントを使用して、ユーザーがより高いコントラストまたはより低いコントラストを要求した場合（通常はmacOSの「コントラストを上げる」のようなオペレーティングシステムのアクセシビリティ設定を通じて）、デザインを変更します。

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Social Security Number</span>
    <input
      class="border-slate-200 placeholder-slate-400 contrast-more:border-slate-400 contrast-more:placeholder-slate-500"
    />
    <p class="mt-2 text-sm text-slate-600 opacity-10 contrast-more:opacity-100">We need this to steal your identity.</p>
  </label>
</form>

ドキュメントを少し書きましたが、正直なところ、ここで書いたことの方が多いです。

ネイティブダイアログの背景をスタイル

かなり新しい HTML <dialog> 要素 があり、驚くほどまともな ブラウザのサポート があり、最先端のものが好きな場合は試してみる価値があります。

ダイアログには、ダイアログが開いている間にレンダリングされるこの新しい ::backdrop 擬似要素があり、Tailwind CSS v3.1は、この要素をスタイル設定するために使用できる新しい backdrop 修飾子を追加します。

<dialog class="backdrop:bg-slate-900/50 ...">
  <form method="dialog">
    <!-- ... -->
    <button value="cancel">Cancel</button>
    <button>Submit</button>
  </form>
</dialog>

このことをもっと深く掘り下げたい場合は、MDNダイアログドキュメントを読むことをお勧めします—エキサイティングなものですが、知っておくべきことがたくさんあります。

任意の値をバリアントにも

さて、これは私にとって本当にハイライトです—独自のカスタムバリアントを作成するための addVariant API を提供していることをご存知ですか？

const plugin = require("tailwindcss/plugin");
module.exports = {
  // ...
  plugins: [
    plugin(function ({ addVariant }) {
      addVariant("third", "&:nth-child(3)");
    }),
  ],
};

...そして、HTMLでユーティリティを使用して任意の値を直接使用するための 任意の値 があることをご存知ですか？

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

Tailwind CSS v3.1は、任意のバリアント を導入し、HTMLで独自のその場限りのバリアントを作成できるようにします。

<div class="[&:nth-child(3)]:py-0">
  <!-- ... -->
</div>

これは、たとえば、ブラウザが @supports クエリを使用して特定のCSS機能をサポートしている場合にスタイルを追加するなど、パラメーター化する必要があるように感じるバリアントに非常に役立ちます。

<div
  class="bg-white [@supports(backdrop-filter:blur(0))]:bg-white/50 [@supports(backdrop-filter:blur(0))]:backdrop-blur"
>
  <!-- ... -->
</div>

この機能を使用して、[&>*] のような任意のバリアントで子要素をターゲットにすることもできます。

<ul role="list" class="space-y-4 [&>*]:rounded-lg [&>*]:bg-white [&>*]:p-4 [&>*]:shadow">
  <li class="flex">
    <img class="h-10 w-10 rounded-full" src="..." alt="" />
    <div class="ml-3 overflow-hidden">
      <p class="text-sm font-medium text-slate-900">Kristen Ramos</p>
      <p class="truncate text-sm text-slate-500">kristen.ramos@example.com</p>
    </div>
  </li>
  <!-- ... -->
</ul>

2番目の子 li の div 内の最初の p を、hover 時のみスタイルすることもできます。

<ul
  role="list"
  class="space-y-4 [&>*]:rounded-lg [&>*]:bg-white [&>*]:p-4 [&>*]:shadow hover:[&>li:nth-child(2)>div>p:first-child]:text-indigo-500"
>
  <!-- ... -->
  <li class="flex">
    <img class="h-10 w-10 rounded-full" src="..." alt="" />
    <div class="ml-3 overflow-hidden">
      <p class="text-sm font-medium text-slate-900">Floyd Miles</p>
      <p class="truncate text-sm text-slate-500">floyd.miles@example.com</p>
    </div>
  </li>
  <!-- ... -->
</ul>

さて、これを行うべきでしょうか？おそらくあまり頻繁にはないでしょうが、正直なところ、直接変更できないHTMLをスタイル設定しようとする場合に、非常に便利なエスケープハッチになる可能性があります。それは鋭いナイフですが、最高のシェフは安全ハサミで料理を準備していません。

少し試してみてください。状況に応じて、優れたツールであることがわかるでしょう。私たちは、現在取り組んでいるこれらの新しいウェブサイトテンプレートのいくつかのトリッキーな場所でそれらを使用しており、カスタムクラスを作成するよりもはるかに快適なエクスペリエンスです。

それがTailwind CSS v3.1です！マイナーバージョンチェンジのみであるため、破壊的な変更はなく、最新バージョンをインストールするだけでプロジェクトを更新できるはずです。

npm install tailwindcss@latest

バグ修正やここで説明しなかったいくつかのマイナーな改善など、変更の完全なリストについては、GitHubのリリースノートをご覧ください。

Tailwind CSS v3.2（もしかしたら、ついにテキストシャドウも？！）のアイデアはすでにたくさんありますが、今はこれらの新しい ウェブサイトテンプレート を完成させるために懸命に取り組んでいます。次の1〜2週間でそのトピックに関する別のアップデートにご期待ください！