Tailwind CSS v2.0

約18ヶ月前にTailwind CSS v1.0をリリースしました。これは、安定性へのコミットメントを示すとともに、マイナーリリースごとにエキサイティングな新機能を継続的に提供していくことを意味します。

そして本日、ついにTailwind CSS v2.0をリリースします。

Tailwind CSS v2.0は初のメジャーアップデートであり、以下が含まれます。

まったく新しいカラーパレット。合計220色を特徴とし、独自のカラースキームを構築するための新しいワークフローを提供します。
ダークモードのサポート。ダークモードが有効になっている場合に、これまで以上に簡単にデザインを動的に変更できます。
超ワイドな2XLブレークポイント。1536px以上のデザインに対応します。
新しいアウトラインリングユーティリティ。outline-radiusが実際に存在する機能であるかのように優れた機能です。
ユーティリティフレンドリーなフォームスタイル。ユーティリティクラスのみでフォーム要素（チェックボックスも含む）を簡単にカスタマイズできる新しいフォームリセットです。
フォントサイズごとのデフォルトの行の高さ。48pxのフォントで1.5の行の高さを使用することを禁止できないのであれば、少なくともデフォルトにすべきではありません。
拡張されたスペーシング、タイポグラフィ、および不透明度スケール。マイクロレベルでの微調整、大きな見出しでさらに大きなインパクトを与えるため、そしてopacity-25では不十分でopacity-50では強すぎる場合に役立ちます。
@apply をあらゆるものに使用可能。レスポンシブ、ホバー、フォーカス、その他のバリアントを含みます。
新しいテキストオーバーフローユーティリティ。truncateだけでは実現できなかった、より正確な制御を可能にします。
バリアントの拡張。リスト全体を再宣言したり、順序を考えたりすることなく、focus-visibleなどの追加のバリアントを有効にできます。
group-hoverとfocus-withinがデフォルトで有効。なぜなら、どのプロジェクトでも有効にしていたからです。
デフォルトのトランジション duration とイージングカーブ。ボタンを作成するために19個ではなく17個のクラスを追加するだけで済むようになります。
IE11との非互換性。責任者に「申し訳ありませんが、私の手に負えません。Tailwindのせいです」と言い訳できます。

Tailwind CSS v2.0は新しいメジャーバージョンですが、特にテンプレートを大量に編集しなければならないような重大な破壊的変更を最小限に抑えるよう努めました。クラス名を2つ変更し、最新のブラウザでは不要になった3つを削除し、2つをより強力な代替機能に置き換えました。影響を受ける可能性のあるその他の破壊的変更は、tailwind.config.jsファイルに少しだけ追加することで修正できます。アップグレードには30分もかからないはずです。

アップグレードガイドで、詳細とプロジェクトをTailwind CSS v2.0に移行するためのステップバイステップの手順をご確認ください。

v2.0で新しいプロジェクトを開始したい場合は、更新されたインストール手順のドキュメントを参照して、すぐに始めましょう。

それにしても、この新しいウェブサイトはどうですか？最高ですよね。

まったく新しいカラーパレット

Tailwind CSS v0.1.0時代に汎用カラーパレットを初めて設計しようとしたときから、私たちは色について多くのことを学びました。そしてv2.0は、これまでのところ私たちにとって最高の試みです。

新しいカラーパレットには、22色（以前は10色）が含まれており、それぞれ10段階の色調（以前は9段階）があり、合計220色になります。

すべての色に非常に明るい50の色調を追加したので、現在は50〜900の範囲になりました。

<div class="bg-gray-50">I can't believe it's not white.</div>

パレットには、5つの異なる色調のグレーも含まれています。本当にクールなものが欲しい場合は「ブルーグレー」を選択することも、よりブラウンに近いものが欲しい場合は「ウォームグレー」まで選択することもできます。

すぐに使えるバランスの取れた8色のパレットを設定していますが、完全なカラーパレットは新しいtailwindcss/colorsモジュールに存在し、設定ファイルの先頭でインポートして、独自のカスタムパレットを自由に作成できます。

const colors = require("tailwindcss/colors");
module.exports = {
  theme: {
    colors: {
      gray: colors.trueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.amber,
    },
  },
};

詳細については、新しい色のカスタマイズに関するドキュメントをご覧ください。

ダークモード

iOSがネイティブダークモードを追加して以来、ダークモードマニアの皆さんは、Tailwindにダークモードを追加するように私を放っておいてくれませんでした。まあ、あなたがやったんです、ここにあります、あなたの勝ちです。

tailwind.config.jsファイルを開き、darkModeをmediaに切り替えます。

module.exports = {
  darkMode: "media",
  // ...
};

はい、これでdark:をbg-blackのようなクラスの先頭に追加するだけで、ダークモードが有効になっている場合にのみ効果が適用されるようになります。

<div class="bg-white dark:bg-black">
  <h1 class="text-gray-900 dark:text-white">Dark mode</h1>
  <p class="text-gray-500 dark:text-gray-300">The feature you've all been waiting for.</p>
</div>

ホバーなどでも動作します。

<button class="bg-gray-900 hover:bg-gray-800 dark:bg-white dark:hover:bg-gray-50">
  <!-- ... -->
</button>

そしてレスポンシブなものにも。

<div class="lg:bg-white lg:dark:bg-black ...">
  <!-- ... -->
</div>

そしてレスポンシブなホバーするものにも。

<button class="lg:dark:bg-white lg:dark:hover:bg-gray-50 ...">
  <!-- ... -->
</button>

詳細については、ダークモードのドキュメントをご覧ください。

超ワイドな2XLブレークポイント

iPhoneで1280px幅のものが出ていると確信しているので、レベルアップする時が来ました。

1536px以上をターゲットにできる新しい2xlブレークポイントを標準で追加しました。

<h1 class="2xl:text-9xl ...">Godzilla</h1>

エキサイティングなのは承知していますが、真面目な話、自分で追加できたのは3年前からです。今では正式なものになりましたが、理解しています。

新しいアウトラインリングユーティリティ

outlineプロパティがボーダー半径を無視し、ほとんど常に見た目が悪くなることはご存知でしょう？ ringユーティリティは、血と汗と涙を通して、より良いソリューションを現実にしようとする私たちの試みです。

これらはborderユーティリティによく似ていますが、ボーダーではなくソリッドなbox-shadowを追加するため、レイアウトに影響を与えません。

<button class="focus:ring-opacity-50 focus:ring-2 focus:ring-blue-300 focus:outline-none ...">
  <!-- ... -->
</button>

ring-offset-{width}ユーティリティを使用して、オフセットしてハロー効果のようなものを作成することもできます。

<button class="focus:ring-opacity-50 focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 focus:outline-none ...">
  <!-- ... -->
</button>

CSSカスタムプロパティの呪文をたくさん使用して、通常のbox-shadowとも自動的に組み合わされるようにしました。

<button class="shadow-sm focus:ring-2 ...">
  <!-- Both the shadow and ring will render together -->
</button>

リング幅のドキュメントは、これらの新しいAPIを学ぶための最適な出発点です。これらは本当にクールで、おそらくあなたが思っている以上に便利です。

ユーティリティフレンドリーなフォームスタイル

私が常に驚いていることの1つは、Tailwindの標準のフォーム要素がいかに信じられないほど役に立たないかについて、不満を言う人がいかに少ないかということです。これらは文字通りひどく見え、奇妙なbackground-image SVGトリックでいっぱいのカスタムCSSを書いたり、color-adjustのようなこれまで聞いたことのないCSSプロパティを必要とするあいまいなエッジケースを心配したりすることなしには、何もできません。

以前、@tailwindcss/custom-formsプラグインでこれを解決しようとしましたが、form-inputやform-checkboxのようなクラスをたくさん追加するのは、どうもしっくりこなかったので、あまり宣伝せず、Tailwindドキュメントからもリンクしませんでした。しかし、今回はうまくいったと思います。

Tailwind CSS v2.0と並行して、@tailwindcss/formsというブランドの新しい公式プラグインをリリースします。これは、すべての基本的なフォームコントロールをブラウザ間で正規化およびリセットし、純粋なユーティリティクラスで非常に簡単にスタイルを設定できる状態にします。

<!-- This will be a nice rounded checkbox with an indigo focus ring and an indigo checked state -->
<input
  type="checkbox"
  class="focus:ring-opacity-50 h-4 w-4 rounded border-gray-300 text-indigo-500 focus:border-indigo-300 focus:ring-2 focus:ring-indigo-200"
/>

標準では含まれていませんが、tailwind.config.jsファイルに1行追加するだけで追加できます。

module.exports = {
  // ...
  plugins: [require("@tailwindcss/forms")],
};

詳細については、@tailwindcss/formsのドキュメントをご覧ください。

フォントサイズごとのデフォルトの行の高さ

Tailwindのすべてのフォントサイズユーティリティには、適切なデフォルトの行の高さがペアで付属するようになりました。

// Tailwind's default theme
module.exports = {
  theme: {
    // ...
    fontSize: {
      xs: ["0.75rem", { lineHeight: "1rem" }],
      sm: ["0.875rem", { lineHeight: "1.25rem" }],
      base: ["1rem", { lineHeight: "1.5rem" }],
      lg: ["1.125rem", { lineHeight: "1.75rem" }],
      xl: ["1.25rem", { lineHeight: "1.75rem" }],
      "2xl": ["1.5rem", { lineHeight: "2rem" }],
      "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
      "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
      "5xl": ["3rem", { lineHeight: "1" }],
      "6xl": ["3.75rem", { lineHeight: "1" }],
      "7xl": ["4.5rem", { lineHeight: "1" }],
      "8xl": ["6rem", { lineHeight: "1" }],
      "9xl": ["8rem", { lineHeight: "1" }],
    },
  },
};

そのため、text-xlのようなユーティリティを追加すると、対応するデフォルトの行の高さ（この場合は1.75rem）が自動的に追加されます。

<p class="text-xl">This will have a line-height of 1.75rem automatically.</p>

これをオーバーライドしたい場合は、leadingユーティリティを重ねることで引き続き実行できます。

<p class="text-3xl leading-normal">Come on don't do this to me.</p>

詳細については、フォントサイズのドキュメントをご覧ください。

拡張されたスペーシング、タイポグラフィ、および不透明度スケール

デフォルトのスペーシングスケールを拡張して、0.5、1.5、2.5、3.5のようなマイクロ値を多数含めました。

<span class="ml-0.5">Just a little nudge.</span>

...および72、80、96のような最上位の新しい値も多数含めました。

<div class="p-96">This is too much padding.</div>

また、inset（古くさい言い方をするなら、top/right/bottom/left）およびtranslateプラグインを拡張して、完全なスペーシングスケールを含めたので、次のようなことができるようになりました。

<div class="top-8">
  <!-- .... -->
</div>

デフォルトのタイポグラフィスケールを新しい7xl、8xl、および9xl値で拡張しました。

<h1 class="text-9xl font-bold">What is this, an Apple website?</h1>

また、デフォルトの不透明度スケールを10ステップ、および5と95の値で拡張しました。

<figure class="opacity-5">
  <blockquote>You can't see me.</blockquote>
  <figcaption>John Cena</figcaption>
</figure>

利用可能なものを正確に確認するには、デフォルト設定ファイル全体をご覧ください。

@apply をあらゆるものに使用可能

長年にわたって最もよく受ける質問は、「なぜ@apply hover:bg-blackは動作しないのですか？」です。

そして、それはもっともな質問であり、それが動作しないのは~~馬鹿げています~~ 馬鹿げていました。

大変な技術力が必要でしたが、ついに解決しました。これで、文字通り何でも@applyできるようになりました。

.btn {
  @apply focus:ring-opacity-50 bg-indigo-500 hover:bg-indigo-600 focus:ring-2 focus:ring-indigo-200;
}

詳細については、更新された @apply ドキュメントをご覧ください。

新しいテキストオーバーフローユーティリティ

v2.0まで、オーバーフローするテキストを制御したい場合、私たちが提供していたのは、かなり強引なtruncateユーティリティだけでした。

テキストを1行に制限することなく、オーバーフローするテキストに省略記号を追加したい場合に、text-overflowプロパティのみを制御するための専用のoverflow-ellipsisおよびoverflow-clipユーティリティを追加しました。

<p class="overflow-hidden overflow-ellipsis">Look ma no whitespace-nowrap ipsum...</p>

動作を確認するには、新しいテキストオーバーフローのドキュメントをご覧ください。

バリアントの拡張

何が最悪か知っていますか？ backgroundColorにfocus-visibleを有効にしたいのに、追加のものを1つ追加するためだけにすべてのデフォルトバリアントをリストする必要があることです。

module.exports = {
  // ...
  variants: {
    backgroundColor: ["responsive", "hover", "focus", "focus-visible"],
  },
};

何が良いか知っていますか？有効にしたいものを1つ追加するだけです。

module.exports = {
  // ...
  variants: {
    extend: {
      backgroundColor: ["focus-visible"],
    },
  },
};

さあ、行きましょう。.

group-hoverとfocus-withinがデフォルトで有効

Tailwind UIに取り組んで学んだことの1つは、group-hoverとfocus-withinは、あると便利なものではなく、必須のものであるということです。

以前にデフォルトでホバーまたはフォーカスを有効にした場所はすべて、group-hoverとfocus-withinもデフォルトで有効になりました。

<div class="group ...">
  <span class="group-hover:text-blue-600 ...">Da ba dee da ba daa</span>
</div>

v2.0でどこで何が有効になっているかの完全なリストについては、デフォルトバリアントのリファレンスをご覧ください。

デフォルトのトランジション duration とイージングカーブ

これまで、Tailwindでトランジションを追加したい場合は、通常、3つのクラスを追加する必要がありました。

<button class="transition duration-150 ease-in-out ...">Count them</button>

v2.0では、transitionPropertyユーティリティが追加されるたびに自動的に使用されるデフォルトのdurationとタイミング関数を指定できるようになりました。

module.exports = {
  // ...
  theme: {
    // ...
    transitionDuration: {
      DEFAULT: "150ms",
      // ...
    },
    transitionTimingFunction: {
      DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)",
      // ...
    },
  },
};

そのため、非常に頻繁に使用する共通のdurationとタイミング関数がある場合は、1つのクラスだけを記述すればよくなりました。

<button class="transition ...">Count them again</button>

もちろん、個別のdurationまたはタイミング関数ユーティリティを重ねることで、これをオーバーライドできます。

<button class="transition duration-300 ease-out ...">We're back baby</button>

トランジションの詳細については、トランジションプロパティのドキュメントをご覧ください。

IE11との非互換性

IE11をまったく気にしないことにしたので、あらゆる種類のクレイジーなものにCSSカスタムプロパティを全面的に採用できるようになり、新しいringユーティリティのようなものが可能になりました。

IE11のサポートを終了すると、PurgeCSSを使用している場合でもビルドが小さくなります。CSS変数のフォールバックを出荷する必要がなくなり、予想以上に積み重なるためです。

最初にこれを行ったBootstrapに敬意を表します。彼らが道を切り開くことを決めていなかったら、私たちはそれほど大胆になれなかったと思います。

朗報は、IE11をサポートする必要がある場合は、依然として驚くほど生産的なフレームワークであるTailwind CSS v1.9をいつでも使用できることです。

というわけで皆さん、これがTailwind CSS v2.0の（かなり大きな）概要です！

何を待っているんですか？素晴らしいものを構築しに行きましょう。

最新情報を直接受信箱に届けましょう。ニュースレターに登録してください。

最新情報を直接受信箱に届けましょう。
ニュースレターに登録してください。