Tailwind CSS v3.0

Tailwind CSS v3.0 が登場しました — 驚異的なパフォーマンス向上、ワークフローの大幅な改善、そして非常に多くの新機能をもたらします。

最もクールな新機能のいくつかを紹介するために、以下をご覧ください： YouTubeチャンネルの「Tailwind CSS v3.0 の新機能」ビデオをご覧ください。

Tailwind CSS v3.0 は、これまでで最もエキサイティングなリリースであり、次のような改善が含まれています：

Just-in-Time、常時 — 非常に高速なビルド時間、スタック可能なバリアント、任意の値をサポート、より優れたブラウザパフォーマンスなど。
すべてのカラーを標準搭載 — シアン、ローズ、フクシア、ライムなどの拡張パレットカラー、そして50 shades of grayを含みます。
カラーボックスシャドウ — 楽しいグローと反射効果、そして色付き背景のより自然な影のために。
Scroll snap API — CSSのみのスクロールスナップのための包括的で構成可能なユーティリティセット。
マルチカラムレイアウト — これでついに夢見ていたオンライン新聞を構築できます。
ネイティブフォームコントロールのスタイリング — チェックボックス、ラジオボタン、ファイル入力を、車輪の再発明をせずにあなたのブランドに合わせることができます。
Print modifier — 誰かがサイトを印刷したときにサイトがどのように見えるかを、HTMLから直接制御します。
最新のアスペクト比 API — パディングハックはもう不要です。Safari 14 をサポートする必要がある場合は別ですが、おそらくそうでしょう、それでも。
凝った下線スタイル — あなたのサイドプロジェクトを最終的に軌道に乗せるための最後のピース。
RTL および LTR 修飾子 — 多方向ウェブサイトを構築する際の完全な制御のため。
縦向きと横向きの修飾子 — 正直に言って、追加するのが非常に簡単だったからです。
任意のプロパティ — Tailwind は、私たちが聞いたことのない CSS プロパティもサポートするようになりました。
Play CDN — ブラウザで直接実行される CDN スクリプトに詰め込まれた新しい Just-in-Time エンジン。
その他多数のユーティリティ — touch-action、will-change、flex-basis、text-indent、scroll-behavior などのサポートを含みます。

さらに、美しく真新しいドキュメントウェブサイトは、すべてのページに改善されたコンテンツと例が満載です。

今日から Tailwind CSS v3.0 を使い始めるには、npm から最新リリースを入手してください

npm install -D tailwindcss@latest postcss autoprefixer

...または Tailwind Play にアクセスして、ブラウザで最新機能を試してみてください。

Tailwind CSS v3.0 はフレームワークの新しいメジャーバージョンであり、いくつかの小さな破壊的変更がありますが、アップグレードプロセスを可能な限りスムーズにするために懸命に努力しました。ほとんどのプロジェクトでは、変更を加えずに v3.0 をインストールできるはずです。

たとえば、Tailwind UI はおそらく地球上で最大の Tailwind プロジェクトであり、すべてのテンプレートは v2 と v3 の両方と完全に互換性があり、変更は必要ありません。

v3.0 への移行に関する詳細とステップバイステップの手順については、アップグレードガイドをご覧ください。

Just-in-Time、常時

3月に、私たちは真新しいJust-in-Time エンジンを紹介しました。これは、大きなパフォーマンス向上をもたらし、任意のプロパティのようなエキサイティングな新機能をアンロックし、複雑なバリアント構成を過去のものにしました。

Tailwind CSS v3.0 では、新しいエンジンが安定版となり、従来のエンジンに代わりました。そのため、すべての Tailwind プロジェクトは、これらの改善をすぐに利用できます。

すべてのカラーを標準搭載

新しいエンジンが登場する前は、開発中に CSS ファイルサイズに常に注意を払う必要があり、私たちが行わなければならなかった最大のトレードオフの1つは、カラーパレットを慎重に制限することでした。

v3.0 では、拡張カラーパレットのすべての色がデフォルトで有効になっています。これには、ライム、シアン、スカイ、フクシア、ローズ、そして50 shades of grayが含まれます。

詳細については、カラーパレットリファレンスをご覧ください。

Scroll snap API

CSS Scroll Snap モジュール用の包括的なユーティリティセットを追加しました。これにより、HTML で直接非常にリッチなスクロールスナップ体験を構築する力を得られます

画像のグリッドをスクロールして、期待される動作を確認してください

新しい Scroll Margin ユーティリティから始めて、API 全体を調べて詳細を確認してください。

マルチカラムレイアウト

columns のサポートを追加しました — 新聞のレイアウトのようなものです。これらは実際には非常に便利で、フッターナビゲーションレイアウトなどにも最適です。

Expedita quo ea quod laborum ullam ipsum enim。Deleniti commodi et。Nam id laborum placeat natus eum。Aliquid aut aut soluta nesciunt culpa magni。Velit possimus autem et aut repudiandae culpa rerum。Qui blanditiis ut qui quia expedita necessitatibus sed。Autem sed ut saepe doloremque aut placeat voluptas ipsum。

Eligendi error nisi recusandae velit numquam nihil aperiam enim。Eum et molestias。Id qui cum veritatis id ea quidem ea rerum saepe。Iste itaque fugiat sequi。Voluptatem quae minus。Maxime ullam ea praesentium recusandae vero est quas。Quia minima fugiat aut laborum impedit facere autem sit qui。Et eos et ullam necessitatibus。Ut voluptatem saepe natus itaque maiores sit repellat aut natus assumenda。

Blanditiis ipsa officia dolores exercitationem nemo beatae voluptatem eos rerum velit asperiores。Non quisquam accusantium officia nisi eius necessitatibus。

Quaerat quia ad voluptatem laudantium natus。Aut ipsa et numquam delectus aliquam。Recusandae libero consequatur dolorum。Animi culpa rerum molestiae ut non et molestias aliquid aut nemo。Sint dolorem dolorem。Iure dolorum amet ea sit perferendis。

Et illum ut officia nisi commodi。Quia et mollitia possimus modi。Delectus aliquid quam eos consectetur。

Accusantium et et qui non sed modi。Corrupti deserunt culpa eos vitae neque aperiam。Repellat tenetur fugit。

Deleniti distinctio ad corrupti nisi。Mollitia qui est natus cumque。Officia dolor qui perferendis necessitatibus saepe excepturi asperiores quos voluptas。Est suscipit facere nihil expedita suscipit quibusdam。Quod cupiditate vero distinctio。Sed est soluta nostrum magnam et saepe blanditiis aut。Vero dolores repellendus et libero minima explicabo provident。Culpa aut dolorem est。

<div class="columns-1 sm:columns-3 ...">
  <p>...</p>
  <!-- ... -->
</div>

詳細については、columns のドキュメントをご覧ください — 新しい break-after/inside/before ユーティリティもご確認ください。

ネイティブフォームコントロールのスタイリング

新しい accent-color プロパティのサポートと、ファイル入力ボタンをスタイリングするための修飾子を追加しました。これにより、ネイティブフォームコントロールに独自のタッチを加えることがこれまで以上に簡単になります

<form>
  <div class="flex items-center space-x-6">
    <div class="shrink-0">
      <img
        class="h-16 w-16 rounded-full object-cover"
        src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80"
        alt="Current profile photo"
      />
    </div>
    <label class="block">
      <span class="sr-only">Choose profile photo</span>
      <input
        type="file"
        class="block w-full text-sm text-slate-500 file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100"
      />
    </label>
  </div>
  <label class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-slate-600">
    <input type="checkbox" class="accent-violet-500" checked />
    <span>Yes, send me all your stupid updates</span>
  </label>
</form>

詳細については、accent color および file input buttons のドキュメントをご覧ください。

Print modifier

新しい print 修飾子を使用すると、~~動物~~ 人々がサイトを印刷したときにサイトがどのように表示されるかをスタイル設定できます

<div>
  <article class="print:hidden">
    <h1>My Secret Pizza Recipe</h1>
    <p>This recipe is a secret, and must not be shared with anyone</p>
    <!-- ... -->
  </article>
  <div class="hidden print:block">Are you seriously trying to print this? It's secret!</div>
</div>

「詳細については、print styles documentation をご覧ください」と言いたいところですが、それは真実ではありません。

凝った下線スタイル

下線の色、太さなどを変更できるようになりました

私はデレクです。タトゥイーンを拠点とする宇宙エンジニアです。私はXウイングを製作するのが好きです。 My Company, Inc。仕事以外では、私は～が好きですポッドレース観戦とライトセーバー戦。

<p>
  I’m Derek, an astro-engineer based in Tatooine. I like to build X-Wings at
  <a href="#" class="underline decoration-sky-500 decoration-2"> My Company, Inc </a>. Outside of work, I like to{" "}
  <a href="#" class="underline decoration-pink-500 decoration-dotted decoration-2"> watch pod-racing </a> and have
  <a href="#" class="underline decoration-indigo-500 decoration-wavy decoration-2"> light-saber </a>{" "} fights.
</p>

詳細については、text decoration color, text decoration style, text decoration thickness, および text underline offset のドキュメントをご覧ください。

RTL および LTR 修飾子

新しい rtl および ltr 修飾子を使用して、多方向レイアウトの実験的なサポートを追加しました

左から右

Tom Cook

オペレーションディレクター

右から左

تامر كرم

الرئيس التنفيذي

<div class="group flex items-center">
  <img class="h-12 w-12 shrink-0 rounded-full" src="..." alt="" />
  >
  <div class="ltr:ml-3 rtl:mr-3">
    <p class="text-sm font-medium text-slate-700 group-hover:text-slate-900">...</p>
    <p class="text-sm font-medium text-slate-500 group-hover:text-slate-700">...</p>
  </div>
</div>

詳細については、RTL support のドキュメントをご覧ください。

縦向きと横向きの修飾子

新しい portrait および landscape 修飾子を使用して、ビューポートが特定の向きにある場合に条件付きでスタイルを追加します

<div>
  <div class="portrait:hidden">
    <!-- ... -->
  </div>
  <div class="landscape:hidden">
    <p>This experience is designed to be viewed in landscape. Please rotate your device to view the site.</p>
  </div>
</div>

この機能のドキュメントは、この投稿のこのセクションよりもさらに内容が少なくなっています。

任意のプロパティ

これはもしかしたら反則かもしれませんが、hover、lgなどの修飾子と組み合わせることができる完全に任意のCSSを追加できるようにしました

<div class="[mask-type:luminance] hover:[mask-type:alpha]">
  <!-- ... -->
</div>

これは、インラインスタイルが成長したときに目指すものです。詳細については、arbitrary properties のドキュメントをご覧ください。

Play CDN

Tailwind CSS v3.0 用の適切な CSS ベースの CDN ビルドを作成する方法はありません。そのため、何か別のことを行う必要がありました — JavaScript ライブラリを構築しました。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <script src="https://cdn.tailwindcss.com/"></script>
  </head>
  <body>
    <!-- -->
  </body>
</html>

そのスクリプトタグを任意の HTML ドキュメントに追加すると、ブラウザで Tailwind のすべての機能を使用できます。これは開発目的のみを目的としていますが、小さなデモを構築したり、新しいアイデアをハックしたりするのに間違いなく楽しい方法です。

詳細については、Play CDN のドキュメントをご覧ください。

さあ、Tailwind CSS v3.0 です！今すぐ新しいドキュメントサイトにアクセスして始めましょう。

すべての変更の詳細なリストについては、GitHub の changelog をご覧ください。

すべてのアップデートを直接受信箱に届けます。ニュースレターに登録してください。

すべてのアップデートを直接受信箱に届けます。
ニュースレターに登録してください。