React.jsは、アプリのフロントエンドを作成するための素晴らしいツールです。Reactを最大限に活用して、これまでで最も複雑なアプリケーションを作成することはできますが、視覚的に美しくなければ誰も使いたくないでしょう。私のアプリケーションを素敵に見せるために、プレーンなCSS、Bootstrap、Tailwindを使用できます。それぞれに独自の長所と短所がありますが、このブログでは、TailwindCSSとは何かとReactアプリケーションでの使用方法について説明します。

TailwindCSSとは

Tailwind CSSは、機能を優先するCSSシステムです。これは、アプリケーションをクラス名（ユーティリティ）で装飾することを意味します。これはプレーンCSSと同じだと思います。ストレートCSSを使用している場合は、独自のクラス名を定義し、スタイリング属性と値を別のCSSファイルに配置します（インラインスタイリングを使用している場合を除く）。これについては後で詳しく説明します。

Tailwind CSSには、CSSファイルのCSSプロパティに対応する定義済みのクラス名が付属しています。ファイルを離れることなく、コンポーネントでクラス名を使用できます。これにより、特に画面が小さいラップトップで作業している場合に、開発を迅速化できます。

Reactインラインスタイリングはどうですか

インラインスタイリングで同じ結果を得ることができるのに、なぜフレームワークを使用するのですか？リアクションインラインスタイリングを使用すると、スタイリングを管理するJavaScriptオブジェクトを構築することになります。これを行うには、スタイリングを二重中括弧で囲む必要がありますstyle={{}}。また、スタイルを別の方法で書く必要があります。これらはJSXに挿入するJavascriptオブジェクトであるため、スタイルをキャメルケースで記述する必要があります。background-color: red;=={{backgroundColor: “red”}}プロパティ全体とその値を宣言する必要があると、コードが非常に混雑し、読みにくくなる可能性があります。そのプロパティは、Tailwindではクラス名で表されます。読みやすさと一貫性を高めるために、これらのクラス名は短く、設定値が含まれています。

Tailwindを使用すると、コンポーネント内で状態のバリエーションと応答性を直接制御できます。これは重要な違いです。この機能は、インラインスタイルでは使用できません。Tailwind CSSを使用すると、クラス名を変更するだけで、コンポーネントをさまざまなメディアサイズに適合させ、ホバーやフォーカスなどの効果を追加できます。Tailwindは、基本的にインラインスタイリングの読みやすさと機能を向上させます。

TailwindCSS-基本

Tailwind CSSの原則について説明しましょう。これで、それが何であるかがわかりました。Tailwindの初期設定は少し難しいかもしれませんが、ドキュメントはそれをガイドする素晴らしい仕事をします。

知っている— tailwind.config.js

これは、システムの構成ファイルです。Tailwindには、デフォルトで特定の方法でスタイル設定される専用のクラス名（ユーティリティ）が含まれています。これは開始を開始するのに最適ですが、デフォルト設定の一部を変更したい場合はどうなりますか？cssファイルにカスタムクラスを追加する代わりに、構成ファイルでこれらのクラスの名前と動作を変更できます。設定と更新は簡単です。すべての主要なユーティリティのドキュメントは、ページの下部に独自のバージョンを追加するために設定ファイルを編集する方法を示しています。

ユーティリティファースト

Tailwind CSSは、これを秘密のソースとして使用します。これまでUtility-Firstフレームワークを使用したことがない場合は、少し学習曲線になる可能性がありますが、それだけの価値があると私が言うときは、私を信じてください。異なるクラス名は最初は気が遠くなるように見えるかもしれませんが、非常に直感的な方法で呼び出されます。 CSSのように、新しい一意のクラス名を考え続けるよりも、これらの名前を覚える方がはるかに簡単です。また、各ユーティリティに設定値があるため、デザインの安定性を高めることができます。 3日前に作成したクラスとその値を覚えておく代わりに、覚えておく必要があるのは、使用するタイトルのことだけですm-8（margin: 2 rem）。はるかに簡単です。
これらのユーティリティを使用するには、対応するユーティリティを要素のクラス名に追加するだけです。作成したい場合divそれがありborder-style: solid; border-width: 2px; max-width: 100%、box-shadow私がしなければならないすべてを持っていたのは：

<div className="width-full border-solid border-3 shadow">
Hi there!
</div>

ドキュメントは素晴らしいです。コードサンプルだけでなく、知っておく必要のあるすべてのリストが含まれています。設定ファイルを使用してバリアントをパーソナライズする方法も示しています。私は通常、開発中にドキュメントを別のタブで開いています。マニュアルには検索バーが含まれているため、学習曲線が大幅に短縮されます。divにパディングを追加する必要があるが、クラス名やサイズを思い出せない場合は、検索フィールドにパディングを入力するだけで、ドキュメントの適切な部分に移動します。開発するたびに、クラス名を確認し、このライフラインを使用して各プロパティで使用できる値を確認します。

コンポーネント

待ってください、これはユーティリティ上に構築されたフレームワークだと思いました！あなたは正しいですが、Tailwindは、開始を支援するために、ユーティリティに基づいて適切に設計されたコンポーネントを惜しみなく提供しています。これは、React-Bootstrapがそのコンポーネントを処理する方法とは異なります。Tailwindコンポーネントは、自分で入力する場合に入力するコードブロックです。これにより、コンポーネントをカスタマイズして独自のものにすることが非常に簡単になります。あなたは彼らのウェブサイト上の何百ものコンポーネントから選ぶことができます。残念ながら、それらすべてにアクセスするにはコストがかかります。彼らはあなたが始めるために無料であるいくつかを持っています。

基本スタイルとコンポーネントの抽出

同じクラスを同じタイプの要素に何度も追加することは、Tailwindの大きな煩わしさです。これにより、開発は面倒で維持が困難になります。幸い、Tailwindを使用すると、カスタムコンポーネントクラスと基本スタイルを定義できます。基本スタイルは、Tailwindをインストールした場所のすぐ下のCSSファイルに適用できます。一部のタグでは、デフォルトのスタイルを設定できます。このタグを将来この方法でスタイル設定する必要があることが確実な場合にのみ、これを提案します。タグを使用してすべてのユーティリティを何度も追加する必要はなく、タグを使用するだけで済みます。

概要

この記事には、要点を説明するためのコーディング例がいくつか含まれていますが、Tailwindのドキュメントは例を使用して設計されているため、1つの記事で完全なものをキャプチャすることはできません。コードの記述方法については、ドキュメントを確認してください。https://tailwindcss.com/docs一見、なじみのないクラス名がたくさんあるのを見ると、圧倒されるかもしれませんが、少し練習すれば、それがあなたにとって第二の性質になることを保証してください。この記事がTailwindCSSの確かな概要を提供してくれることを願っています。

幸せな読書 ！！