ReactとTailwind CSSを使用してWebサイトを構築します

このチュートリアルは、ReactおよびTailwind CSSを使用して製品Webサイトを作成する方法を示しています。 Create React App Configuration Override（CRACO）を使用して、Tailwind CSSとのReactをセットアップする方法について説明します。 TailwindのCSSユーティリティクラスとバリアント、およびそれらの使用方法。 Webサイトを簡単にダークモードに互換性を置く方法。グループは何ですか。そして、バリアントを有効にする方法。

ここで作成しているWebサイトのデモを表示できます。このGithubリポジトリでこのリポジトリのコードを見つけることができます。

キーテイクアウト

CREATE REACT APPとCRACOを利用して、手動CSSとの反応を効率的にセットアップし、手動構成の複雑さを回避します。

テールワインドCSSユーティリティクラスとバリエーションを活用して、広範なカスタムCSSを作成せずにコンポーネントを簡単にスタイリングします。
• テールワインドCSSの単純な構成変更でダークモードを実装して、ユーザーのOSの好みに適応します。
レスポンシブデザインと擬似クラスのためのユーティリティクラスの力を探索し、スタイリングをよりダイナミックで柔軟にします。
• Configファイルで色、フォント、その他の要素を直接変更することにより、ブランドのニーズに合わせてTailWindのテーマをカスタマイズします。
Tailwind CSSプラグインを使用し、機能を拡張して、追加のスタイル、ユーティリティ、およびカスタムコンポーネントを含めます。
• ホバー状態とレスポンシブ調整のための特定のテールワインドCSSバリアントを有効にし、ウェブサイトのインタラクティブで応答性のある側面を強化します。
• 前提条件
• 開始する前に、node.jsとnpmをインストールする必要があります。 node.jsがインストールされている場合は、npmをインストールします。
ノードがインストールされているかどうかを確認するには、コマンドラインで以下を実行します。
バージョンを見ることができるはずです。 npm：
• についても同じことをします

Tailwind CSSにはnode.jsバージョン12.13.0以降が必要であることに注意する必要があります。

どちらのエラーが発生した場合は、ノードをインストールする必要があります。 Node Webサイトのインストール手順をフォローするか、「nvmを使用してnode.jsの複数のバージョンのインストール」という記事に従うことができます。

reactとtailwind css

のセットアップ

注：Create Reactアプリに不慣れな場合は、「React Appの作成：React Projectsを早く準備する」をチェックしてください。

<span>node -v
</span>

最初に、Create-React-App：

を使用してReactプロジェクトを作成します

<span>npm -v
</span>

次に、作成されたプロジェクトにディレクトリを変更します：

次に、Tailwind CSS：

に必要な依存関係をインストールします

Create React App（またはCRA）はこの記事を書いている時点でPostCSS 8をサポートしていないため、PostCSS 7互換性ビルドを使用してTailwind CSSをインストールしています。また、バージョン2.0の後にTailwind CSSに必要なAutoprefixerもインストールしています。

craco

のセットアップ

通常、CRAを構成するには、React-Scriptsを実行する必要があります。ただし、これは非常に不便です。これは、プロジェクトにCRA（WebPack構成、Babel構成、PostCSS構成など）に隠されているすべての構成を排除するため、非常に不便です。もはやサポートできなくなります。

これは、Create React App Configuration Override（またはCraco）が入る場所です。Cracoは、CRAに単純な構成レイヤーを追加するライブラリです。 CRA内のすべての構成をプロジェクトに排出する代わりに、たとえば、WebPackに構成を追加するためだけに、元の構成のすべての新しい構成または変更が新しいファイルcraco.config.jsに配置されます。 CRACOを使用すると、手間をかけずにCRAを構成するように構成することができます。

ここでは、PostCSS構成をオーバーライドし、TailWindCSSプラグインを追加するにはCracoが必要です。それでは、最初にインストールしましょう：

craを使用する場合、package.jsonのスクリプトは次のようになります。

<span>node -v
</span>

CRACOを使用してCRAではできないことをデフォルトで行うために、スクリプトを変更してプロジェクトの構築または開発で実行するためにCRACOを使用する必要があります。

<span>npm -v
</span>

最初、ビルド、テストスクリプトで、React-ScriptsをCracoに置き換えました。 ejectスクリプトに変更を加えていません。

次に、プロジェクトのルートでcraco構成ファイルcraco.config.jsを作成します：

npx create-react-app react-shop

この構成ファイルは、PostCSSにTailWindCSSとAutoprefixerプラグインを追加します。

次に、Tailwind CSS：

の構成ファイルを生成します

<span>cd react-shop
</span>

注：node.js v14を使用している場合、「モジュール「Autoprefixer」を見つけることができない」というこのコマンドを実行しているときにスローされたエラーについて報告された問題があります。 node.js v15への更新は機能するはずですが、それを行うことができない場合は、ここで回避策のいずれかをフォローしてください。

これにより、プロジェクトのルートにファイルtailwind.config.jsが作成されます。次のコンテンツがあります：

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

構成キーのそれぞれが意味するものは次のとおりです

1. purge：これは、ファイルを指定するために使用されますCSSはスキャンして、どのTailwind CSSクラスが使用されているかを確認します。
DarkMode：これは、プロジェクトのダークモードの動作を指定します。値はメディアにすることができます。つまり、ダークモードのスタイリングは、ユーザーのOSのデフォルトモードに依存するダークモードメディアクエリに基づいて適用されます。また、クラスになることもあります。つまり、HTMLドキュメントの親要素が暗いクラスを持っている場合、ダークモードのスタイリングが適用されます。
2. テーマ：これは、テーマ、フォント、ブレークポイントなどのカラーパレットを変更するために使用できます。チュートリアルの後半でテーマを変更する方法を確認します。
バリアント：これにより、Tailwind CSSのコアプラグインに追加のバリアントを適用できます。チュートリアルで後でどのように機能するかを確認します。
プラグイン：追加のユーティリティクラス、カスタムバリエーション、ベーススタイルなどを追加できるプラグインを追加するセクション。
今のところ、2つの変更を加えます。まず、パージキーを変更します：
これは、Tailwind CSSに、SRCディレクトリ内のすべてのJS、JSX、TS、およびTSXファイルを調べるように指示し、Public/Index.htmlファイルを介してTailwind CSSから使用し、未使用のクラスを削除するクラスを把握するように指示します。 🎜>

2番目の変更は、ダークモードの場合です：

このチュートリアルで簡単にするために、ユーザーのOSの好みに基づいてダークモードを維持します。

<span>node -v
</span>

Tailwind CSSとのReactプロジェクトをセットアップする最後のステップは、Src/index.cssにTailwind CSSスタイルの一部を含めることです。このファイルの内容を次のものに置き換えます

@TailWind Directiveは基本的にStylesをIndex.cssにインポートします。デフォルトでは、CRAはSRC/index.jsでsrc/index.cssをインポートします

これは、Tailwind CSSスタイルがReactプロジェクトに適用されることを意味し、美しいWebサイトの構築を開始する準備ができています！

<span>npm -v
</span>

Tailwind CSSユーティリティとバリエーションを理解する

コーディングに入る前に、Tailwind CSSユーティリティクラスとバリアントが何であるかを理解しましょう。 Tailwind CSSは、スタイリングコンポーネントを簡単にし、再利用可能なコンポーネントの作成に集中するのに役立つように設計されています。ユーティリティクラスは、CSSを作成せずに考えることができるような方法でコンポーネントをスタイリングできる幅広いクラスです。 たとえば、境界線を備えた

要素をスタイリングし、フォントサイズを変更し、背景を変更し、テキストの色を作成するには、CSSでこのようなものを書く必要があります。

Tailwind CSSを使用して、ユーティリティクラスを使用するだけで行うことができます：

npx create-react-app react-shop

この例では、各クラスが意味するものです。

1. 境界線：境界幅を1px
に設定します
2. border-red-100：ボーダーの色を赤の色合いにします（テーマに基づいて）
3. Text-LG：フォントサイズ1.125REMとラインの高さ1.75REM
を示します
4. bg-red-400：背景色を赤の色合いに設定します（テーマに基づいて）
5. Text-White：テキストの色を白に設定します

使用できる他の多くのクラスがあり、さまざまな色の色合いもあり、テーマが容易になります。ユーティリティクラスを使用すると、実際にCSSを書く必要はめったにありません。

わかりましたが、メディアの質問はどうですか？ Psuedoクラスはどうですか？ダークモードはどうですか？これらは自分でCSSを書く必要なく行うことができますか？

バリエーションが入ったときです。バリエーションを使用すると、デバイスのブレークポイント、要素の状態、またはダークモードが有効になっているかどうかに基づいて要素にスタイリングを追加できます。

したがって、以前は、デバイスのサイズに基づいて要素の幅を変更するためにこれを行った可能性があります。

Tailwind CSSを使用すると、これを簡単に行うことができます：

<span>node -v
</span>

これは、min-width：1025pxが現在の画面幅に適用される場合、W-1/2クラス（幅：50％を意味する）を適用します。 -WIDTH：768PXは現在の画面幅に適用され、他のバリアントがもう適用されない場合、w-fullクラス（幅：100％を意味します）を適用します。

これは間違いなく、すべてのプロジェクトでやらなければならない退屈な仕事をより簡単かつ速くします。最初は混乱するように見えるかもしれませんが、より多くのことに手を出し始めると、ユーティリティクラスとバリアントを使用することがどのように第2の性質になるかを理解できます。

プロジェクトの公式ドキュメントでTailwindの構成について詳しく読むことができます。 コンポーネントの実装

<span>npm -v
</span>

私たちのウェブサイトに戻ります。きちんとしたデザインで製品を表示するシンプルなWebサイトを作成しています。簡単にするために、偽のストアAPIの偽のデータを使用します。実際にAPIにリクエストを実行する代わりに、サンプルJSON応答を取得し、プロジェクトのJSONファイルに配置します。繰り返しますが、これはチュートリアルの単純さのためだけです。

製品のエンドポイントに移動し、応答をコピーします。次に、ファイルsrc/data/products.jsonを作成し、その中の応答を貼り付けます。これに類似したオブジェクトの配列である必要があります：

製品コンポーネントの実装から始めましょう。このコンポーネントは、製品に関する情報を表示するカードコンポーネントになります。次のコンテンツを使用して、SRC/Components/Product.jsを作成します

ご覧のとおり、製品コンポーネントには製品の詳細が表示されます。現時点ではスタイリングのクラスを追加していません。

次に、src/app.jsにアクセスして、コンテンツを次のように変更します。

<span>node -v
</span>

ここでは、製品としてProducts.jsonファイルをインポートしています。次に、以前に作成した製品コンポーネントを使用して、製品をループし、各製品を表示します。繰り返しますが、スタイリングのクラスを追加していないことに注意してください

今すぐサーバーを開始しましょう。次のコマンドを実行します：

<span>npm -v
</span>

テキストがたくさんあることがわかりますが、スタイリングはまったくありません。

いくつかの背景色

を追加します

スタイリングの追加を始めましょう。まず、ページの背景色を変更します。そのために、Tailwindの背景色のクラスを利用します。バックグラウンドカラークラスは、形式のbg- {color} - {numericscale}で、numericscaleはオプションです。

デフォルトの色は、白、黒、灰色、赤、青、緑、黄色、オレンジ、インディゴ、紫、ピンクになります。数値スケールは色の色合いを定義し、50は最も明るい色合いで、900は最も暗いものです。たとえば、背景色を明るい赤にしたい場合は、BG-RED-200を使用できます。 私たちのウェブサイトでは、背景色を明るい灰色に設定します。そのため、クラスBG-Gray-200をSRC/app.jsの最も外側の

要素に追加します：

今すぐウェブサイトをチェックしている場合（サーバーがまだ実行されていない場合は、再度実行してください）、背景が灰色の明るい色合いに変更されていることがわかります。

npx create-react-app react-shop

コンテンツの幅の変更

次に行うことは、画面の幅が少なくとも768pxの場合、コンテンツの幅を画面の実際の幅の50％に変更することですが、小さなデバイスでは幅を全幅に保つことです。 Tailwindの幅クラスを利用します。幅クラスはフォーマットw- {size}であり、サイズは0〜96の範囲になります。これはremの値を指します。 1/2または3/5などの比率、またはパーセンテージを参照するその他の比率。または、自動幅または100％の幅のフル用の自動のようなキーワード。

画面サイズに基づいて幅を指定するには、SM、MD、LGなどのバリエーションを使用します。これらのバリアントは、ルールを適用するために必要な最小画面サイズを指定します。 私たちの場合、画面の幅は少なくとも768pxの親の50％にしたいので、W-1/2：のMDバリアントを使用します。

<span>node -v
</span>

幅は、画面の幅の半分に変更されます。ただし、水平に中心に集中する方がはるかに良いでしょう。そのために、Tailwindのマージンユーティリティクラスを使用します。マージンクラスはフォーマットm {side} - {value}であり、側面はオプションであり、上部のtのような要素の両側に固有、下部のb、左のl、右のr、または特定yを水平に使用するか、xを使用して垂直に使用します。値は0〜96の範囲で、わずか1pxでpx、または自動することができます。それだけでなく、クラスの先頭に追加することで負のマージンを追加することもできます。たとえば、-m -2。

要素を水平に中心にしているので、MX-Auto：

を使用します

<span>npm -v
</span>

そして、あなたはそれが中心にあるのを見ることができます。

製品コンポーネントのスタイリング

次に、製品コンポーネントに進みましょう。製品カードの背景色も追加します。白くして、BGホワイトを使用します。また、W-Fullを使用するため、全幅になります。製品カードを互いに分離するために、MB-5：

を使用して要素にマージンボトムを追加します。

npx create-react-app react-shop

そして、ウェブサイトで変更を見ることができます：

製品コンポーネントで見ることができるように、最も外側の要素内には2つの要素があります。1つは製品の背景画像があり、もう1つは情報があります。隣同士に表示したいと思います。最初に行う必要があることは、最も外側の

の表示を変更して曲げることです。そのためには、Tailwindのディスプレイクラスを使用します。前述の以前のクラスとは異なり、表示クラスにはフォーマットがありません。それらは私たちが望むディスプレイの名前にすぎません。したがって、要素の表示プロパティをフレックスに変更するには、フレックスクラスを追加するだけです。

<span>cd react-shop
</span>

次に、以前の幅クラスを使用して

要素の幅を変更します。

今すぐウェブサイトをチェックすると、画像とテキストが隣同士になっていることがわかります。

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

いくつかの間隔を追加

まだ修正することがたくさんあります。まず、製品情報コンテナ用のパディングを追加しましょう。そのためには、Tailwindのパディングクラスを使用します。パディングクラスは、M。

したがって、製品情報コンテナにP-5を追加します。また、MT-4：

を使用して、説明コンテナにマージンを追加します。

また、src/app.jsのコンテナ全体に上部と下のマージンを追加して、最初と最後の製品が両側からページの端にないようにします。それを行うには、クラスPY-4：

を追加します

<span>node -v
</span>

ウェブサイトが今より良く見えるようになります。

コンポーネントのタイポグラフィの改善

今度はタイポグラフィに少し取り組みましょう。製品情報はすべて同じように見えることがわかります。タイトルをカテゴリから説明などと区別することはできません。まず、テキストの一部の色を変更しましょう。そのためには、Tailwindのテキストカラークラスを使用します。これらのクラスの形式は、バックグラウンドカラークラスに似ていますが、Bをテキストに置き換えます。たとえば、テキストの色を緑にするには、クラスText-Green-100を追加します。

それでは、カテゴリのテキスト色をText-Gray-400に変更して、他のテキストと比較して少しフェードを付けて、テキストの色をText-Red-500に変更して目立つようにしましょう。また、価格に最高のマージンを追加して、最も際立っていることを確認します。

今すぐウェブサイトにアクセスすると、テキストが異なる部分を区別するという点で少し明確に見えることがわかります。

<span>npm -v
</span>

次に、フォントサイズを変更しましょう。そのために、Tailwindのフォントサイズのクラスを使用します。これらのクラスの形式はText- {size}で、サイズはSMから9xlの範囲です。 MDバリアントを使用して幅が少なくとも768px以上の画面にクラスのText-4XLを追加し、小規模な画面にテキストXLを追加することにより、価格のフォントサイズを価格のフォントサイズを大きくします。タイトルを作成します。少なくとも768pxの幅もある画面にクラスText-2XLを追加することにより、より大きくなります：

テキストは今でははるかに良く見えます。

npx create-react-app react-shop

製品画像の配置

次に、画像を修正して完全に表示し、背景画像を適切に配置しましょう。

最初に、背景の画像サイズを変更します。そのためには、Tailwindの背景サイズのクラスを使用します。これらのクラスの形式はbg- {size}で、サイズは自動、封じ込め、またはカバーできます。私たちの場合、画像全体が確認されるようにするのはBGコンテインです。

2番目に、背景リピートの属性を変更して、画像が複数回繰り返さないようにします。そのために、Tailwindの背景リピートクラスを使用します。これらのクラスの形式はBG- {RepeatValue}です。ここでは、RepeatValueはバックグラウンドリピートプロパティに与える値、またはラウンド値のBGリピートラウンド、およびスペース値のBGリピートスペースです。私たちの場合、BG-No-Reepeatを使用します。

3番目に、画像が常に中央に配置されるように、バックグラウンド位置属性を変更します。そのために、Tailwindのバックグラウンドポジションクラスを使用します。これらのクラスの形式はBG- {Position}であり、位置はバックグラウンドポジションプロパティに与える値です。クラスBGセンターを追加します：

<span>node -v
</span>

今、画像を完全に見ることができます。

いくつかの画像が容器の端に触れていることに気付くでしょう。それを修正するために、背景画像要素にラッパー

要素を追加し、パディングを追加します。

<span>npm -v
</span>

以前に背景画像に与えた幅をラッパー要素に移動し、背景画像要素にWフルとHフルを追加して、親の幅の100％が必要になることに注意してください。と高さ。

ボックスシャドウと丸い角を追加

私たちの製品は今ではずっと良く見えています。現在のスタイルに2つの最後のタッチを追加します。まず、各製品に影を追加します。 Tailwindのボックスシャドウクラスを使用します。これらのクラスの形式はShadow- {size}であり、サイズはオプションであり、SMから2XLの範囲です。また、影を内側にするためにボックスシャドウまたは内側を削除することもできません。第二に、製品カードの境界線を少し丸くします。 TailwindのBorder Radiusクラスを使用します。これらのクラスの形式は丸められています - {位置} - {サイズ}。サイズはオプションであり、SMから3XLの範囲であるか、境界半径またはフルの場合は、完全に丸くするためにはありません。位置もオプションであり、上部または左のLのような特定の位置になることができます。また、左上のTLのような特定のエッジに固有の場合もあります。

製品カードにシャドウ-SMを追加して小さな影を追加し、丸いlgを丸くして境界線を丸くします：

最後に、製品リストページは以下のスクリーンショットのように見えます。

npx create-react-app react-shop

テーマのカスタマイズ

これまでのところ、私たちが行ったすべてのスタイリングは、Tailwindのデフォルトスタイリングに基づいています。ただし、Tailwindを使用すると、テーマをカスタマイズすることもできます。色、フォントファミリなどを変更できます。これらの変更はすべて、tailwind.config.js。

で行われます

色を少し変更してみましょう。テーマの色を変更するにはさまざまな方法があります

それを行う1つの方法は、独自の色を定義することです。たとえば、テーマに新しい色を追加するために、Tailwind.config.jsで以下を実行できます。

内側のtheme.extendで、色オブジェクトを追加したことに注意してください。その後、ターコイズ色の16進コード付きのキーターコイズを追加しました。これで、デフォルトの色を使用するのと同じように、その色を使用できます。たとえば、背景色をターコイズに設定するには、BG-Turquoiseを使用できます。

テーマの色をカスタマイズする別の方法は、デフォルトの色を変更することです。前述のように、テールウィンドのデフォルトの色は、白、黒、灰色、赤、青、緑、黄色、オレンジ、インディゴ、紫、ピンクです。これらの色の実際の値を変更できます たとえば、

黄色をマスタードイエローに変更するには、これを行います。

ここで、黄色にデフォルトのクラスを使用すると、ここで定義した黄色が得られます。また、数値スケールを使用して色のさまざまな色合いの値を指定することもできます。

<span>node -v
</span>

最も明るい、明るい、デフォルト、ダーク、ダークなどのキーを使用することもできます：

<span>npm -v
</span>

カラーパレットの追加

npx create-react-app react-shop

色を変更する3番目の方法は、Tailwind CSSの他のカラーパレットを使用することです。

最初に、tailwind.config.jsの最初にtailwindcss/colorsの色が必要です：

次に、赤をバラのパレットに、灰色から青灰色に変えます。

今すぐウェブサイトをチェックすると、使用した色にわずかな変更が表示されます。

<span>cd react-shop
</span>

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

色の違いをよく見たい場合は、灰色をmberに変えようとすることができます：

背景が黄色くなっていることがわかります

Tailwind.config.jsからすべてのフォントファミリなどを変更することもできますが、Tailwind CSSで提供された同じクラスを使用しています。これにより、デザインに合わせてテーマを簡単にカスタマイズできます。

ダークモードの追加

<span>npm install @craco/craco
</span>

ダークバリアントにより、ダークモード用の要素を簡単にスタイリングできます。同時に、ライトモード用にスタイリングしています。

最初は、ウェブサイトをセットアップしていたとき、Tailwind.config.jsの暗いキーをメディアに変更しました。これは、ブラウザまたはOSがダークモードに設定されているときにダークモードが適用されることを意味します。

ウェブサイトがダークモードでどのように見えるかをテストしたいが、暗いモードに設定されていない場合は、Chrome Devtoolsでこれをエミュレートできます。

f12

を押してdevtoolsを開き、shift

p

（または

cmd

Shift p）および表示されるドロップダウンでは、「表示レンダリング」を入力し、表示するオプションを選択します。最後に、「CSSメディア機能をエミュレートするカラーシェームを好む」までスクロールして、より好ましいカラー - スcheme：darkを選択します。同じことを選択して、ライトモードをテストするために、より好ましい色のスcheme：light。 クラスを追加することにより、ダークモードでウェブサイトの背景色を変更することから始めましょう。 今すぐチェックして、ブラウザ/OSがダークモード（またはエミュレート）に設定されている場合、背景色が灰色の暗い色合いに変更されていることがわかります。

製品カードを変更しましょう。 Class Dark：BG-Gray-300を最も外側の要素に追加します：

<span>node -v
</span>

今すぐ確認すると、製品カードの背景色が変更されていることに気付くでしょうが、白い背景があるため、画像が見栄えが良くないことにも気付くでしょう。

ダークモードのときに背景ラッパーに白い背景を追加することで、より良くしましょう。これは、クラスダークを追加することで実行できます：bg-white。また、カテゴリのテキストの色がかろうじて表示されるようになるので、クラスを追加することで暗いものに変更します：Text-Gray-700：

<span>npm -v
</span>

私たちのウェブサイトの最終的な外観を以下に示します

グループおよびプラグインのバリエーションを有効にします

いくつかのバリアントは、デフォルトではすべてのプラグインで有効にされていません。これにより、ファイルサイズが大きくなるためです。したがって、これらのバリアントを使用する必要がある場合は、必要なプラグインのTailwind.config.jsで手動で有効にする必要があります。ここにあるプラグインは、私たちがずっと使ってきたクラスです。たとえば、背景色はBackgroundColorプラグインに属します

有効化されていないバリエーションの1つは、グループホバーです。グループは、グループ化された多くの要素であるため、どの状態（ホバー）がグループ全体に影響を与える可能性があります。グループクラスをコンテナに追加することにより、グループは宣言されます。次に、コンテナの子である要素にユーティリティクラスの1つを使用して、グループホバーバリアントを使用できます。グループホバーで使用したユーティリティクラスは、グループ内の要素（つまり、コンテナ要素内の要素）がホバリングされない限り、適用されません。

すべての製品カードをグループにし、ホバーで画像にズームインします。そのため、製品コンポーネントの最も外側の要素にグループクラスを追加し、次のクラスに背景画像を持つ要素に追加します。

1. 遷移変換：Tailwindのトランジションクラスの1つ。遷移プロパティを適用して、変換のみを変換します
Duration-300：Tailwindの移行期間クラスの1つ。値300ms。
2. の遷移期間を適用します
Group-Hover：Transform：上記のように、グループホバーバリアントは、グループ内の要素がホバリングされている場合にのみ、変換クラスが適用されることを保証します。 Transformは、Tailwindの変換クラスの1つです。これにより、他の変換関連クラスを追加できます。
Group-Hover：Scale-125：Scale-125クラスは、Tailwindのスケールクラスの1つです。 xとyの両方のスケールを1.25に設定しますが、最初に変換クラスを追加する必要があります。
上記のクラスを使用して、製品の要素がホバリングされると、画像はズームインします。また、製品コンポーネントの最も外側の要素にクラスオーバーフローハンドを追加して、画像が容器の外側に成長した場合、オーバーフローしないようにします。また、Hover：Shadow-2XLを使用して、遷移-Shadow Duration-300で製品カードの影を大きくし、トランジションがシームレスであることを確認します。

注：ダークモードをエミュレートしている場合（またはダークモードを使用している場合）、ライトモードで効果が良くなる可能性があるため、必ずライトモードに切り替えてください。

<span>node -v
</span>

今すぐ製品の上にホバリングをしようとすると、影が拡大し、画像が拡大していることがわかります。

結論

CSSを書くことなく、反応を伴うきちんとした応答性の高いWebサイトを作成しました！それがTailwind CSSの魔法です。 Tailwind CSSは、退屈で反復的な作業を削除したり、CSSを書いたりします。また、テーマの作成を容易にし、洗練されたデザインの再利用可能なコンポーネントの作成に集中することができます。これは、Reactに最適です。この記事で取り上げたのは、Tailwind CSSで簡単に作成できるすべての美しいものの表面を引っ掻くだけです。 TailwindとのReactを使用する

FAQ

Tailwind CSSとは何ですか？なぜReactで使用する必要があるのですか？

Tailwind CSSは、Webアプリケーションのスタイリング用の事前定義されたクラスのセットを提供するユーティリティファーストCSSフレームワークです。 Tailwind CSSを使用してReactを使用すると、開発プロセスをスピードアップし、一貫した設計システムを維持できます。

NPMまたはYARNでインストールし、ビルドプロセスを構成してTailwind CSSクラスを処理することにより、Tailwind CSSをReactプロジェクトに統合できます。 Tailwind CSS？

はい、Create ReactアプリでTailwind CSSを使用できます。 CRACO構成やReactScripts PostCSSセットアップなど、いくつかの方法があり、シームレスに動作するようにします。

Tailwind CSSクラスをReactコンポーネントに適用するにはどうすればよいですか？

ClassName Propsを使用して、Tailwind CSSクラスをReactコンポーネントに直接適用できます。たとえば、

hello、tailwind！

。

ユーティリティクラスを使用すると、Reactコンポーネントがより簡潔になり、一貫した設計システムが促進されます。また、レスポンシブデザインを簡素化し、再利用性を促進します。

反応コンポーネントを使用して、Tailwind CSSでレスポンシブクラスを使用するにはどうすればよいですか？

Tailwind CSSは、さまざまな画面サイズのさまざまなスタイルを定義できるレスポンシブクラスを提供します。これらのクラスをMD：：Classの定義などのブレークポイントを追加することで使用できます。

Tailwind CSSは強力ですが、クラスの使用に注意しないと、ファイルサイズが大きくなる可能性があります。また、従来のCSSを使用することを好むデザイナーにとっても挑戦的かもしれません。

以上がReactとTailwind CSSを使用してWebサイトを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。