tailwind.css v3.1で追加された機能まとめ

こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。

tailwind.cssは「ユーティリティファースト」が特徴の、CSSフレームワークになります。

少し前に、tailwindのバージョン3.1の機能が追加されました。

今回は記事を参考に、自分なりに解説していきたいと思います。

v3.1の追加機能

追加された機能は以下になります。

• First-party TypeScript types(ファーストパーティのTypeScriptタイプ)
• Built-in support for CSS imports in the CLI(CLIでのCSSインポートのビルトインサポート)
• Change color opacity when using the theme function(関数使用時の色の不透明度の変更)
• Easier CSS variable color configuration(簡単なCSS可変色設定)
• Border spacing utilities(ボーダー間隔の制御)
• Enabled and optional variants(「有効」と「オプション」のバリアント)
• Prefers-contrast variants(コントラストを優先するバリアント)
• Style native dialog backdrops(ダイアログ時、背景のスタイル)
• Arbitrary values but for variants(任意のバリアント値を指定)

ファーストパーティのTypeScriptタイプ

tailwind.config.jsに型を定義することができるようになりました。定義の設定も、一行追加するだけのようなので楽です。

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

CLIでのCSSインポートのビルトインサポート

CLIツールを使用している場合、postcss-importが組み込まれるようになり、CSSのファイル整理を簡潔に行うことができるようになりました。

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

tailwind.cssは、theme関数機能を提供しており、スタイル値を変数として定義することができます。ただ制限として、取得した色の値の透明度を調整することができませんでした。それが、今回スラッシュ構文を使用することによって対応可能になりました。

こちらの設定は、tailwind.config.jsでも指定可能になります。

.select2-dropdown {
  background-color: theme(colors.gray.100 / 50%);
  color: theme(colors.gray.900 / 80%);
}

簡単なCSS可変色設定

css変数の設定をする際に、tailwind.config.jsに関数を使用する代わりに、フォーマットを使用して色を定義できるようになりました。正直、こちらの使用頻度は低いのではと思います。

ボーダー間隔の制御

borderプロパティに新しいユーティリティが追加され、テーブル間の境界線の調整ができるようになりました。border-spacing、border-separateプロパティを使用します。

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

「有効」と「オプション」のバリアント

:enabledと:optionalの新しいバリアントが擬似クラスに追加されました。

:enabled

tailwind.cssでは、disabledのボタンを実装する時に、ホバーした時のスタイルを制御するのに手間がかかりました。

公式の例(disable時にホバーした時の処理を追記する手間がある）

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

この時に、:enableを使用することによって、以下のような書き方ができるようになりました。disabled時にホバーしてもスタイルを適応しないようになります。

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

:optional

:optionalは兄弟要素（peerクラス)を組み合わせて、フォームが「必須」であるかないかを認識させることができます。

公式の例では、上のフォームは必須(Required)なので、peer-optional（任意かどうか）が効かず表示されますが、下のフォームは必須ではないのでpeer-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>

コントラストを優先するバリアント

ユーザーが、(OSの設定などにより)コントラストの強弱を変更したときに、contrast-moreとcontrast-lessを使用することで、デザインを変更することができます。

ダイアログ時、背景のスタイル

backdropを使用することで、ダイアログが開いているときに、背景にスタイルを指定することができます。

例：ダイアログが表示されている間、背景に"bg-slate-900/50"を適用。

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

任意のバリアント値を指定

addVariantAPI

tailwind.cssでは、focus、activeや機能クエリなどを、addVariant関数を使用して登録できます。

const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('third', '&:nth-child(3)')
      addVariant('hocus', ['&:hover', '&:focus'])
      addVariant('supports-grid', '@supports (display: grid)')
    })
  ]
}

arbitrary values

また、tailwindでは角括弧を使用することでより詳細な単位で、スタイルの数値を指定することができます。こちらは、使用頻度も高いのではと思います。

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

arbitrary variants

今回のアップデートによって、上記のように「値」の部分ではなく「バリアント」の部分を、直接指定できるようになりました。これによって、コンポーネントの親要素からスタイリングすることが容易になると思います。

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

まとめ

今回は、tailwind.cssのv3.1での変更点についてまとめてみました。個人的に、公式の使用例が複雑すぎて、どんなスタイルが当たっているのか理解するのが大変でした笑。また、HTMLのdialog要素など、正直知らなかったので学びになりました。予期せぬ知識の吸収が、ブログを通じたアウトプットのいい点だなと改めて感じました。