テイルウィンドvに向けて準備中

Oscar Jite-Orimiono 著✏️

「追い風」という言葉は文字通り、飛行機や船の進行方向と同じ方向に吹く風を意味します。これにより、物体がより速く移動し、より早く目的地に到達できるようになり、速度と効率が確保されます。

Tailwind CSS は、「HTML を離れることなく、最新の Web サイトを迅速に構築」できるようにするユーティリティ優先のフレームワークです。すべての開発者が好むわけではありませんが、Tailwind CSS は 2019 年のリリース以来、大きな人気を集めています。

現在、「トップ [番号を挿入] CSS フレームワーク」を検索すると、Bootstrap や Bulma などの確立された名前と並んで Tailwind CSS がリストされる可能性があります。

この記事では、次のバージョンである Tailwind v4.0 のプレビューと詳細な分析を提供します。既存のプロジェクトを移行するための戦略と、Tailwind v4.0 の新機能を示す例について説明します。また、同様の CSS フレームワークと比較し、このフレームワークを使用する利点と制限についても検討します。

Tailwind v4.0 の使用を開始する

Tailwind v4.0 は数か月間開発され、最初のパブリック ベータ版は 2024 年 11 月にリリースされました。

さらに詳しい情報については、プレリリース ドキュメントを参照してください。このガイドでは、開発者が Tailwind CSS v4.0 に期待できる多くの新しいエキサイティングな機能のいくつかを取り上げます

新しいパフォーマンスエンジン

Tailwind チームは、2024 年 3 月に新しいパフォーマンス エンジン、Tailwind Oxide を発表しました。利点としては、ビルド プロセスを高速化するための統合ツールチェーンや構成の簡素化などが挙げられます。

CSSファーストの設定

Tailwind の現在のバージョンでは、tailwind.config.js ファイルを使用して、Tailwind のデフォルトのデザイン トークンをオーバーライドできます。これは、カスタム ユーティリティ クラスやテーマを追加したり、プラグインを無効にしたりできるカスタマイズ ハブです。

その最も重要な機能は、Tailwind が関連するユーティリティ クラス名をスキャンして適切な出力を生成できるように、プロジェクトのコンテンツ ソースを定義することです。

Tailwind v3 で新しいプロジェクトをセットアップするときの tailwind.config.js ファイルのデフォルトのコードは次のとおりです:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

削除されたディレクティブ

構成ファイルをセットアップした後の次のステップでは、Tailwind ディレクティブをindex.css ファイルに追加します。

Tailwind v3 のディレクティブは次のとおりです:

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind v4 では、tailwind.config.js ファイルと @tailwind ディレクティブは必要ありません。 「tailwindcss」をメイン CSS ファイルにインポートするだけで準備完了です:

@import "tailwindcss";

これにより、新しいプロジェクトをセットアップするときの手順の数とファイルの数が削減されます。

たとえば、既存の v3 プロジェクトがある場合は、新しい @config ディレクティブを使用して JS 構成ファイルを CSS ファイルにロードすることで、引き続き JS 構成ファイルを使用できます。

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

ただし、corePlugins、重要、セパレータなどのすべての機能が完全な v4.0 リリースでサポートされるわけではありません。セーフリストなどの一部のオプションは、動作が変更されて戻ってくる可能性があります。

ソース検出

含めたくないファイルがある場合は、Tailwind をインポートするときにsource() 関数を使用して自動検出を制限できます。

@tailwind base;
@tailwind components;
@tailwind utilities;

.gitignore ファイル内の他のソースのように、Tailwind がデフォルトで検出しない追加のソースについては、@source ディレクティブを使用して追加できます。

@import "tailwindcss";

ソース検出を完全に無効にすることもできます:

@import "tailwindcss";

@config "../../tailwind.config.js";

プリフライトの無効化

プロジェクトに必要な特定の個別レイヤーをインポートし、Tailwind の基本スタイルを無効にすることができます。

@import "tailwindcss" source("../src");

テーマのカスタマイズ

新しい CSS ファーストのアプローチにより、Tailwind プロジェクトへのカスタム スタイルの追加が簡単になります。カスタマイズは、JavaScript 構成ファイルではなく、メインの CSS ファイルに直接追加されます。

たとえば、Tailwind CSS v3 のカスタム テーマに新しい色を設定したい場合は、tailwind.config.js ファイルのテーマ セクションで新しいユーティリティ クラスを定義する必要があります。

JavaScript 構成ファイルでこれを行う方法は次のとおりです:

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

HTML ファイルにクラスを追加する方法は次のとおりです。

@import "tailwindcss" source(none);

この例では、ユーティリティ クラスは bg-background、text-light、および text-lilac です。

Tailwind CSS v4.0 では、新しい @theme ディレクティブを使用して CSS ですべてのカスタマイズを構成します。

@layer theme, base, components, utilities;
@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);

その後、ユーティリティ クラスが HTML に追加されます。デフォルトの Tailwind カラーのように、同じ色の異なる色合いを選択できます:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        background:'#764abc',
        lilac: '#eabad2',
        light: '#eae3f5'
      }
    },
  },
  plugins: [],
}

VS Code でテストしている場合、@import ディレクティブがエラーとして強調表示される可能性がありますが、問題なく動作するため、心配しないでください。

上記の例は Tailwind CSS と React を使用して作成されているため、HTML にクラスではなく className があることに注意してください。使用しているフレームワークに関係なく、ユーティリティは同じままです。

テーマ変数

前の例から、CSS 変数が Tailwind v4.0 のすべてのテーマのスタイルを制御していることがわかります。

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

v4.0 では、特定のテーマの名前空間、つまり、色、フォント、テキストなどのデフォルトのユーティリティ、または Tailwind テーマ全体をオーバーライドして、独自のテーマを構成できます。メイン CSS ファイル内の基本的にすべての Tailwind ユーティリティのカスタム スタイルを簡単に設定できます。 デフォルトのテーマ全体をオーバーライドするには、-*:initial を使用します。デフォルトの Tailwind フォントをオーバーライドして独自のフォントを定義したい場合は、--font-*:Initial の後にカスタム スタイルを使用します:

@tailwind base;
@tailwind components;
@tailwind utilities;

この場合、プロジェクトで使用できるフォント ファミリー ユーティリティは font-display だけになります。

二重ダッシュを使用してカスタム プロパティのデフォルトのスタイルを設定できます。これは、デフォルトの Tailwind CSS フォントとテキスト スタイルを備えたページです: このページの HTML マークアップは次のとおりです:

@import "tailwindcss";

前の例のカスタム カラーを使用し、新しいフォントとテキスト スタイルを構成しています。

@import "tailwindcss";

@config "../../tailwind.config.js";

この例では、2 つのフォントをインポートし、ロゴと h1 ヘッダーに使用するために --font-display 変数と --font-logo 変数の下に保存しています。また、両方の新しいテキスト サイズとデフォルトのスタイルも設定しています。

そのため、HTML にユーティリティ クラスのテキストロゴを追加すると、要素のフォント サイズはデフォルトで 1.5rem、フォントの太さは 700 になります。同様に、クラス名が text-big の要素は、デフォルトで font-size が 6rem、font-weight が 700、letter-spacing が -0.025em になります。

次に、新しいユーティリティ クラスを HTML ファイルに追加します。

@import "tailwindcss" source("../src");

カスタム スタイルを含むページのスクリーンショットは次のとおりです。 Tailwind v4.0 では、複数のクラスを 1 つのカスタム ユーティリティで置き換えることができるため、デフォルトの Tailwind 値への依存度が低くなります。この例では、h1 ヘッダーの text-5xl および text-bold ユーティリティ クラスが text-big クラス名に置き換えられます。

繰り返しますが、これは特定の名前空間に限定されません。これはすべてのユーティリティで実行できます。

シンプルなテーマ設定

一部のユーティリティは、Tailwind v4.0 のテーマ設定に基づいていなくなりました。追加の構成を行わずに、HTML ファイルで直接、必要なものを正確に指定できます。

Tailwind v3 では、tailwind.config.js ファイルで列の数を定義する必要がありましたが、Tailwind v4.0 では、grid-cols-5 程度の小さい値から最大の数までの任意の数を使用できます。グリッド列-73。これは、z-index ユーティリティ (z-40 など) および opacity-* にも適用されます。

Tailwind v4.0 には、data-* などのバリアントのサポートも組み込まれています。任意の値を指定せずに使用できます。

これらの変更の主な利点は、開発者が非必須または非コアのデザイン トークンの構成に費やす時間を短縮できることです。

動的間隔スケール

m-*

、 w-*、mt-*、px-* などの 間隔ユーティリティは、デフォルトの Tailwind v4 で定義されている基本間隔値 0.25rem を使用して動的に生成されます。 0テーマ。

基本間隔値のすべての倍数が間隔スケールで使用可能です。したがって、mt-1 が 0.25rem の場合、mt-2 は 0.25rem を 2 倍して 0.5rem となり、mt-21 は 5.25rem になります。

明示的に定義されていない値を指定してスペース ユーティリティを使用できます。 Tailwind v3 では、mt-[5.25rem] などの任意の値またはカスタム テーマを使用する必要があります。追加の構成は必要なく、より一貫性のあるデザインを作成できます。

利用可能な間隔の値を制限したい場合は、デフォルトの変数を無効にしてカスタム スケールを定義できます。

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

この設定では、すべての Tailwind 間隔ユーティリティは、特別に定義された値のみを使用します。

カラーパレットを更新しました

Tailwind v4 は、デフォルトの rgb カラー パレットから oklch に移行しています。oklch では、より鮮やかな色が可能になり、rgb よりも制限が緩和されています:

コンテナクエリのサポート

Tailwind CSS v4.0 ではコンテナ クエリにサポートが組み込まれています。応答性の高いコンテナーを作成するために @tailwindcss/container-queries プラグインは必要ありません。

コンテナ クエリは、親コンテナのサイズに基づいて要素にスタイルを適用するために使用されます。これは、サイトのレイアウトがビューポート全体ではなく個々のコンポーネントに適応することを意味します。

v4.0 では、@container ユーティリティを親要素に追加してコンテナ クエリを作成します。子要素の場合は、@sm や @lg などの応答性の高いユーティリティを使用して、親のサイズに基づいてスタイルを適用します。

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind v4.0 では、最大幅コンテナー クエリ用の新しい @max-* バリアントも導入されています。コンテナーが特定のサイズを下回る場合に、スタイルを追加しやすくなります。 @min-* と @max-* を組み合わせて、コンテナーのクエリ範囲を定義できます:

@import "tailwindcss";

このコードでは、親コンテナの幅が md と xl (768px と 1280px) の間の場合、子 div は非表示になります。

コンテナ クエリのユースケースには、ナビゲーション、サイドバー、カード、画像ギャラリー、レスポンシブ テキストが含まれます。また、柔軟性も向上し、ブラウザー間で十分にサポートされているため、v4.0 プロジェクトで使用を開始できます。

v3 から Tailwind CSS v4.0 への移行

v3 プロジェクトを v4 にアップグレードする場合、Tailwind はほとんどの作業を行うアップグレード ツールを提供しています。プロジェクトをアップグレードするには、次のコマンドを実行します:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

アップグレード ツールは、依存関係の更新、JS 構成ファイルの CSS への移行、テンプレート ファイルの変更の処理などのいくつかのタスクを自動化します。

Tailwind では、メイン ブランチをそのまま維持するためにアップグレードに新しいブランチを使用し、差分を注意深く確認することをお勧めします。 git diff コマンドを実行すると、プロジェクト内の変更を確認して理解するのに役立ちます。また、ブラウザでプロジェクトをテストして、すべてが正常に動作していることを確認することもできます。

複雑なプロジェクトでは手動での調整が必要になる場合があります。Tailwind では主要な変更点とそれに適応する方法について概説しています。これについては以下で説明します。

依存関係の変更

PostCSS プラグイン: v4.0 では、PostCSS プラグインが専用パッケージ @tailwindcss/postcss として利用できるようになりました。既存のプロジェクトの postcss.config.mjs ファイルから postcss-import と auto-prefixer を削除できます:

@tailwind base;
@tailwind components;
@tailwind utilities;

新しいプロジェクトを開始している場合は、次のコマンドを実行して、PostCSS プラグインと一緒に Tailwind をインストールできます。

@import "tailwindcss";

Vite プラグイン: Tailwind CSS v4.0 には新しい専用の Vite プラグインもあり、PostCSS プラグインから移行することをお勧めします:

@import "tailwindcss";

@config "../../tailwind.config.js";

PostCSS で見たように、新しいプロジェクトをセットアップするときに Vite プラグインと一緒に v4.0 をインストールできます。

@import "tailwindcss" source("../src");

Tailwind CLI: CLI ツールの使用は、Tailwind CSS をセットアップする最も簡単かつ迅速な方法であり、現在は専用の @tailwind/cli パッケージに常駐しています。それに応じてビルド コマンドを更新する必要があります:

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

廃止されたユーティリティ

いくつかの古いユーティリティまたは文書化されていないユーティリティが削除され、最新の代替ユーティリティに置き換えられました:

コンテナユーティリティの構成

v4.0 では、@utility を使用してコンテナ ユーティリティを構成します。

@import "tailwindcss" source(none);

Center や Padding などの構成オプションは v4.0 には存在しません。

デフォルトのスケールの変更

すべてのシャドウ、ブラー、境界線半径ユーティリティに対してデフォルトのスケール調整が行われ、名前付きの値が確実に含まれるようになりました。 プロジェクト内の各ユーティリティを置き換えて、変更が加えられないようにする必要があります。見た目が違います。

デフォルトの枠線の色の変更

v3 では、デフォルトの境界線の色はグレー 200 です。境界線ユーティリティを使用する場合、明示的に色を設定する必要はありません:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwind CSS v4 では、境界線の色が currentColor に更新され、境界線ユーティリティを使用する場所で色を指定しないと、現在のプロジェクトの視覚的な変化が発生する可能性があります。

v4.0 のデフォルトの境界線の色は次のとおりです: v3 のデフォルトの動作を維持するには、次の CSS 行をプロジェクトに追加できます:

@tailwind base;
@tailwind components;
@tailwind utilities;

デフォルトのリング幅の変更

リング ユーティリティは v3 では 3 ピクセルのリングを追加しますが、v4 ではデ​​フォルトで 1 ピクセルになります。プロジェクトを更新して外観を維持する場合は、リング ユーティリティの使用を Ring-3 に置き換えてください。

デフォルトのプレースホルダーの変更

v4 では、プレースホルダー テキストはデフォルトで 50% の不透明度で現在のテキストの色を使用します。 v3 ではグレー 400 色が使用されており、この動作を保持したい場合は、これを CSS に追加します:

@import "tailwindcss";

概要の変更

また、v4 では、outline-none ユーティリティは v3 のように透明な 2 ピクセルのアウトラインを追加しません。 v4 には、v3 のアウトラインなしと同様に動作する、新しいアウトライン非表示ユーティリティがあります。

プロジェクトをアップグレードするときは、アウトラインを完全に削除する場合を除き、現在の状態を維持するために、outline-none をoutline-hidden に置き換える必要があります。

カスタムユーティリティの追加

カスタム ユーティリティは、@layer ユーティリティではなく、新しい @utility API で動作するようになりました。この変更により、ネイティブ カスケード レイヤーとの互換性が確保されます。

これらは単なる単一クラス名になり、複雑なセレクターではなくなりました:

@import "tailwindcss";

@config "../../tailwind.config.js";

順序依存のバリアントの積み重ね

Tailwind v4.0 では、最初と最後のようなバリアントが左から右にスタックされるため、プロジェクト内でバリアントを順序付ける必要があります。

任意の値の CSS 変数

新しい CSS 標準での曖昧さを避けるために、任意の値の変数の構文が角括弧から括弧に変更されました。プロジェクト内でこれを更新する必要があります:

@import "tailwindcss" source("../src");

テーマ()関数の使用

Tailwind CSS v4.0 はすべてのテーマ値の変数を生成するため、theme() 関数は必要ありません。 Tailwind では、可能な限り、プロジェクト内のすべての theme() 関数を CSS 変数に置き換えることをお勧めします。

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

Tailwind v4.0 での変更点の詳細については、プレリリース ドキュメントを参照してください。

Tailwind および代替 CSS フレームワーク

Tailwind CSS の最も明白な代替案は、世界で最も人気のある CSS フレームワークである Bootstrap です。事前定義されたコンポーネントの広範なライブラリがあります。

Bootstrap は、おそらく Tailwind CSS よりも初心者に優しいです。特定のわかりやすいクラス名を使用して、すぐに使用できるコンポーネントを作成できます。 Tailwind では、ユーティリティとその基礎となる CSS ルールを理解する必要があります。

Bootstrap が Tailwind CSS に勝るもう 1 つの利点は、デフォルトで JavaScript が含まれているため、より多くのバックエンド機能を実行できることです。 Tailwind CSS は JS フレームワークと組み合わせる必要があります。

ただし、Bootstrap は、Tailwind CSS ほどカスタマイズ可能または柔軟ではありません。すべての Bootstrap サイトは同じに見えるというのが長年の議論です。 Tailwind はユーティリティ第一のアプローチにより、より高い柔軟性と制御を提供します。

Tailwind CSS の短所

近年、missing.css や Mojo CSS など、ユーティリティ優先の CSS フレームワークがさらに登場しています。 Tailwind から王冠を奪うことができた人は誰もいませんでしたが、それは相応の制限がないわけではありません:

急な学習曲線: 前述したように、実用性優先のアプローチと多数のクラスは初心者にとって学習が難しい場合があります。

コードの可読性: 主に HTML ファイルで作業しているため、各要素がユーティリティを蓄積するにつれてコードが読みにくくなる可能性があります。

一貫性のないデザイン: Tailwind CSS の柔軟性は、注意しないとプロジェクト全体で一貫性のないデザインにつながる可能性があります。

フレームワークの切り替え: プロジェクトは Tailwind CSS と密接に結合されるため、別のフレームワークへの切り替えが困難になることがあります。

Tailwind CSS v4.0 への移行

既存のプロジェクトを新しいバージョンの Tailwind にアップグレードするのは難しい作業のように思えるかもしれません。これは複雑なプロジェクトの場合に当てはまりますが、その利点は価値があります。 Tailwind は、追加のツールやファイルを削除し、より明確な構文を提供することで、すべてをより高速かつシンプルにしています。

---

フロントエンドがユーザーの CPU を占有していませんか?

Web フロントエンドがますます複雑になるにつれて、リソースを貪欲な機能がブラウザーに要求します。本番環境のすべてのユーザーのクライアント側の CPU 使用率、メモリ使用量などを監視および追跡することに興味がある場合は、LogRocket を試してください。

LogRocket は Web アプリやモバイル アプリ用の DVR のようなもので、Web アプリ、モバイル アプリ、または Web サイトで発生するすべてを記録します。問題が発生する理由を推測する代わりに、主要なフロントエンド パフォーマンス メトリクスを集計してレポートし、アプリケーションの状態とともにユーザー セッションを再生し、ネットワーク リクエストをログに記録し、すべてのエラーを自動的に明らかにすることができます。

Web アプリとモバイル アプリのデバッグ方法を最新化します。無料でモニタリングを始めましょう。

以上がテイルウィンドvに向けて準備中の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。