Tailwind CSS v1.9.0

Tailwind CSS v1.9 をリリースしました。このバージョンでは、設定プリセット、便利な新しい CSS グリッドユーティリティ、拡張された border radius、rotate、skew スケール、役立つアクセシビリティの改善などが追加されています。

ハイライトを見ていきましょう...

• 設定プリセット
• grid-auto-columns および grid-auto-rows のユーティリティ
• フォーカスインジケーターの改善と設定可能なアウトライン
• 拡張された border radius、rotate、および skew スケール
• v1.9 へのアップグレード

変更点の完全な概要については、GitHub のリリースノートをご覧ください。

設定プリセット

Tailwind CSS v1.9 では、プロジェクトのカスタム「ベース設定」を構成できるようにする新しい presets キーが tailwind.config.js ファイルに追加されました。

module.exports = {
  presets: [require("@my-company/tailwind-base")],
  theme: {
    extend: {
      // Project specific overrides...
    },
  },
};

presets に指定した内容は、デフォルトの Tailwind ベース設定を置き換えるため、完全にカスタムな出発点を定義できます。これは、同じブランドカラー、フォントのカスタマイズ、または間隔スケールを共有する必要がある複数の異なる Tailwind プロジェクトに取り組むチームの一員である場合に非常に役立ちます。

複数のプリセットをリストすることもでき、それらは上から下にマージされます。

module.exports = {
  presets: [require("@my-company/tailwind-base"), require("@my-company/tailwind-marketing")],
  theme: {
    extend: {
      // Project specific overrides...
    },
  },
};

プロジェクト固有の設定とカスタムベース設定をマージするロジックは、デフォルト設定での動作とまったく同じであるため、extend のような使い慣れた機能はすべて期待どおりに動作します。

grid-auto-columns および grid-auto-rows のユーティリティ

grid-auto-columns および grid-auto-rows CSS プロパティの新しいユーティリティを追加する新しい gridAutoColumns および gridAutoRows コアプラグインを追加しました。

これらのユーティリティを使用すると、暗黙的に作成されたグリッド列と行のサイズを制御できます。グリッドの列/行数を指定しない場合は常に、デフォルトの列/行サイズを設定するために使用します。

<div class="grid auto-cols-max grid-flow-col">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

以下は、すぐに使用できる新しいユーティリティのリストです。

これらのユーティリティには、デフォルトで responsive バリアントが含まれており、tailwind.config.js ファイルの gridAutoColumns および gridAutoRows セクションで期待どおりに構成できます。

フォーカスインジケーターの改善と設定可能なアウトライン

outline-none クラスを更新して、アウトラインなしをレンダリングする代わりに、デフォルトで透明なアウトラインをレンダリングするようにしました。これは、カスタムボックスシャドウベースのフォーカススタイルが完全に非表示になる Windows ハイコントラストモード を使用するユーザーにとって非常に役立ちます。

これで、視覚障碍者にとってサイトが使いにくくなることなく、ボックスシャドウを使用してカスタムフォーカススタイルを安全に作成できます。

<button class="focus:shadow-outline focus:outline-none ...">
  <!-- ... -->
</button>

また、outline-white と outline-black の 2 つの新しいアウトラインスタイルを追加しました。

これらのユーティリティは、それぞれの色で 2px の点線のアウトラインを 2px オフセットでレンダリングします。これらは、キーボードユーザーが画面上でどの要素が選択されているかを簡単に確認できるようにする、一般的な目的で邪魔にならないフォーカスインジケーターとして最適で、デザインと衝突しすぎることもありません。

使用している背景色に関係なく十分なコントラストを持つオプションを常に利用できるように、white と black の両方のバリエーションを含めました。

<!-- Use `outline-white` on dark backgrounds -->
<div class="bg-gray-900">
  <button class="focus:outline-white ...">
    <!-- ... -->
  </button>
</div>
<!-- Use `outline-black` on light backgrounds -->
<div class="bg-white">
  <button class="focus:outline-black ...">
    <!-- ... -->
  </button>
</div>

もちろん、背景色、ボックスシャドウ、ボーダーなどを使用して、好きなカスタムフォーカススタイルを自由に作成することもできます。これらは、あまり凝ったものにしたくない場合に最適です。

outline プロパティも設定可能にしたため、tailwind.config.js ファイルでカスタムアウトラインを定義できるようになりました。

module.exports = {
  theme: {
    extend: {
      outline: {
        blue: "2px solid #0000ff",
      },
    },
  },
};

[outline, outlineOffset] の形式のタプルを使用して、カスタムアウトラインユーティリティの outline-offset 値を指定することもできます。

module.exports = {
  theme: {
    extend: {
      outline: {
        blue: ["2px solid #0000ff", "1px"],
      },
    },
  },
};

拡張された border radius、rotate、および skew スケール

デフォルトで 3 つの新しい border radius ユーティリティを追加しました。

...および rotate と skew ユーティリティの両方に対して、より小さい値の拡張セット

これらのすべてに対して、負のバージョンも含まれています。より微妙な rotate および skew 効果に非常に便利です！

アップグレード

Tailwind CSS v1.9 は非破壊的なマイナーリリースであるため、アップグレードするには、実行するだけで済みます。

# npm
npm install tailwindcss@^1.9
# yarn
yarn add tailwindcss@^1.9

以前は実験的機能であった 2 つの機能 (defaultLineHeights および standardFontWeights) を future に昇格させました。そのため、今秋後半の Tailwind CSS v2.0 へのアップグレードを簡素化するために、今すぐこれらの変更をオプトインすることもお勧めします。

この記事について話し合いたいですか？ GitHub でディスカッションする →