この記事では、次の概要を使用して Tailwind でテキストをスタイル設定するためのガイドを提供します。
Tailwind で Text Align クラスを使用する方法
テキスト コンテンツのスタイルを設定するとき、テキストの位置は装飾と同じくらい重要です。テキストが適切に配置されていない場合、Web ページ全体のデザインが奇妙に見えます。 Tailwind でテキストを整列するには、次のクラスが使用されます。
文章- { アライメント }
位置合わせオプションには「 中心 '、' 左 '、' 右 '、 そして ' 正当化する ”。以下のデモを使用して、これらの各配置を理解しましょう。
< p クラス = 「テキストセンター bg-slate-200」 > これはサンプル テキストであり、TEXT CENTER 配置で提供されます。 < / p >
< br >
< p クラス = 「text-right bg-slate-200」 > これはサンプル テキストであり、TEXT 右揃えで提供されています。 < / p >
< br >
< p クラス = ' text-left bg-slate-200' > これはサンプル テキストであり、TEXT LEFT 配置で提供されます。 < / p >
< br >
< p クラス = ' text-justify bg-slate-200' > これはサンプル Text であり、TEXT JUSTIFY 配置で提供されます。 < / p >
上記のコードの説明は次のとおりです。
- 四 ' p ” 要素が作成され、改行で区切られます。
- 4 つの p 要素のテキストは、「」を使用して特定の位置に配置されます。 テキスト-{配置} ' クラス。
- ” bg-{色}-{数字} ” クラスは、各” の背景色を提供します。 p ' 要素。
出力
以下の出力では、各配置クラスがテキストの位置にどのような影響を与えるかがわかります。最初の要素のテキストが中央揃え、2 番目の要素が右揃え、3 番目の要素が左揃えで、4 番目の要素のテキストが両端揃えで表示されていることがわかります。
Tailwind でテキスト コンテンツに色を付けるにはどうすればよいですか?
色は、要素のテキスト コンテンツのスタイルを設定する際に重要な役割を果たします。適切な色を選択しないと、文字が読みにくくなることがあります。これはレイアウトのデザインに悪影響を及ぼします。 Tailwind でテキストの色を設定するには、以下のクラスを使用します。
文章- { 色 } - { 番号 }上記で定義された構文では、ユーザーは色の名前と、その後に指定された色の色合いを担当する番号を指定する必要があります。
以下のデモには 3 つの「 p 異なるテキストの色のクラスを使用してスタイル設定された要素:
< p クラス = 「テキスト-バイオレット-500 テキスト-センター」 > これは紫色のテキストです < / p >< p クラス = 「テキスト-レッド-500 テキスト-センター」 > これは赤い色のテキストです < / p >
< p クラス = 「テキスト-グリーン-500 テキスト-センター」 > これは緑色のテキストです < / p >
上記のコードで使用されるクラスは次のとおりです。
- 最初 ' p ” 要素には、” を使用して紫色が提供されます。 テキスト-{色}-{数値} ' クラス。
- 2番目と3番目の「 p 」要素には、同じ方法で赤と緑の色が与えられます。
- ” テキストセンター ” クラスは、テキスト コンテンツを要素の中央に配置します。
出力
以下の出力から、text-{color}-{number} クラスを使用して、テキストのデフォルトの黒色が指定された色に変更されていることは明らかです。
Tailwind で異なるフォント ファミリを使用するにはどうすればよいですか?
テキスト要素のフォントを使用して、特定のテキストを強調できます。それぞれのフォントには独自の特徴があります。 Tailwind の要素のフォントを変更するには、次のクラスを利用します。
フォント- { 家族 }Tailwind は 3 つのデフォルトのフォント ファミリを提供します。 それなし '、' セリフ '、 そして ' 単核症 ”。これらのフォント ファミリはそれぞれ異なるフォント スタイルを持っています。
同様に、「 フォント-{太さ} ” クラスを使用して、テキストを太字、淡色、または標準にすることができます。デモを使用して、Tailwind のさまざまなフォント ファミリにフォントの太さを提供してみましょう。
< p クラス = 'font-mono font-extrabold text-center' > これは MONO フォントの極太テキストです < / p >< p クラス = ' font-serif font-semibold text-center' > これはフォント SERIF の半太字のテキストです < / p >
< p クラス = 「 font-sans font-extralight text-center」 > これは、SANS フォントのエクストラ ライト テキストです。 < / p >
コードの説明:
- 三つの「 p 」要素は、「mono」、「serf」、および「sans」フォント ファミリによって提供されます。 フォントファミリー} ' クラス。
- 同様に、3つの「 p ” 要素は” として提供されます。 極太 '、' 半太字 '、 そしてその ' エクストラライト ” を使用したフォントの太さ” フォント-{太さ} ' クラス。
- これらの要素はすべて「 テキストセンター 」 要素の中央にテキストを配置するクラス。
出力
与えられた出力は、すべての「」を示しています。 p ” 要素には、異なるフォント ファミリーとフォント ウェイトがあります。
Tailwind でテキストに下線を付けるにはどうすればよいですか?
テキスト要素は、さまざまな種類の下線を追加してスタイルを設定することもできます。文章の一部を強調する場合に使用します。テキスト要素に下線を付けるには、次のクラスが使用されます。
下線 装飾- { スタイル }言葉 ' 下線 ” は要素に基本的な下線を提供し、” 装飾-{スタイル} ” クラスは、下線にさまざまなスタイルを提供するために使用されます。以下のデモを使用してこれを理解しましょう。
< p クラス = ' 下線装飾 - 実線テキスト - 中央' > このテキストには実線の下線が付いています < / p >< p クラス = 「下線装飾-二重文字-中央」 > このテキストには二重下線が付いています < / p >
< p クラス = 「下線装飾-波状テキスト-中央」 > このテキストには波線の下線が付いています < / p >
< p クラス = 「下線装飾-点線テキスト-中央」 > このテキストには点線の下線が付いています < / p >
上記のコードには 4 つの「」があります。 p 「」によって提供される要素 固体 '、' ダブル '、' 波状の '、 そして ' 点在 」スタイルの下線。
出力：
次の出力から、要素がさまざまな下線付き装飾クラスを使用してスタイル設定されていることは明らかです。
Tailwind でテキストにインデントを付けるにはどうすればよいですか?
どのテキスト文書でも、インデントはテキストコンテンツの書式設定に使用されます。 Tailwind は、次のクラスを使用してテキスト コンテンツにインデントを提供するデフォルト クラスも提供します。
インデント- { 幅 }上記で定義された構文の幅は、テキスト コンテンツに提供されるインデント マージンのサイズに影響します。
2 つのテキスト要素に異なるインデント値を割り当ててスタイルを設定し、結果を見てみましょう。
< p クラス = 「インデント-4 py-12」 > これはサンプル テキストであり、「indent-4」クラスを使用してインデントが提供されます。 < / p >< p クラス = 「インデント-28」 > これはサンプルテキストであり、「indent-28」クラスを使用してインデントが提供されています。 < / p >
上記のコードでは、2 つの「 p ”幅”の凹みが設けられています。 4 「＆」 28 ' それぞれ。最初の要素には、「」を使用した上下のパディングも提供されます。 p-12 ' クラス。
出力：
以下の出力では、2 番目のテキスト要素のインデント幅が大きいため、テキストの先頭のマージンが大きくなっていることがわかります。
Tailwind を使用してテキストをスタイル設定する方法は以上です。
結論
Tailwind は、テキスト要素をスタイル設定するためのさまざまなクラスを提供します。 Tailwind でテキストのスタイルを設定するには、「 テキスト-{色}-{数値} '、' テキスト-{配置} '、' 下線装飾-{style} '、 そして ' インデント-{幅} ' クラス。この記事では、Tailwind のさまざまなクラスを使用してテキストをスタイル設定するためのガイドを提供しました。