Tailwind は、色、間隔、フォント サイズなど、さまざまなプロパティに事前定義された値のセットを提供する CSS フレームワークです。ただし、ユーザーは、カスタム設定など、デフォルト設定に含まれていない値を使用したい場合があります。色または特定の余白。この状況では、任意の値を使用できます。

この記事ではTailwind CSSで任意の値を使用する方法を解説します。

Tailwind で任意の値を利用するにはどうすればよいですか?

任意の値は、Tailwind 構成ファイルで定義せずに、HTML クラス属性に直接書き込むことができるカスタム値です。これらには、[24px]、[2.5rem] などの角括弧表記が接頭辞として付けられます。Tailwind で任意の値を利用するには、角括弧表記を使用し、カスタム値を指定してユーティリティ クラスを動的に生成します。

理解を深めるために、以下の手順を確認してください。

ステップ 1: HTML プログラムで任意の値を使用する

HTML プログラムを作成し、任意のカスタム値を含む角括弧表記を利用して、目的のクラスを作成します。たとえば、私たちが使用したのは、 「bg-[#e9e516]」、「w-[600px]」、「h-[400px]」、「p-[13px]」、 および他のクラス:

ここ：

• 「bg-[#e9e516]」 クラスは
  の背景色を次のように設定します。 「#e9e516」 （黄色）。
• 「w-[600px]」 クラスは
  の幅を 600 ピクセルに設定します。
• 「h-[400px]」 クラスは、
  要素に 400 ピクセルの高さを適用します。
• 「p-[13px]」 クラスは、
  のパディングを 13 ピクセルに設定します。
• 「m-[19px]」 クラスは、
  のマージンを 19 ピクセルに設定します。

• 「テキスト-[30px]」 クラスは、

  要素のフォント サイズを 30 ピクセルに設定します。

• 「テキスト-[#7405ab]」 クラスは

  要素のテキストの色を紫に設定しました (#7405ab)。

• 「追跡-[0.5rem]」 クラスは、文字間隔を 0.5 rem に

  要素に適用します。

ステップ 2: 出力を確認する

任意の値が適切に機能していることを確認するには、HTML Web ページを表示します。

上記の出力は、任意の値が定義どおりに正しく機能していることを示しています。

結論

Tailwind で任意の値を利用するには、HTML プログラムで任意のカスタム値を含む角かっこ表記を使用して、クラスを動的に生成します。ユーザーは、フォント サイズ、色、幅、高さ、マージン、パディングなど、数値または色の値を受け入れる任意のプロパティの値を使用できます。この記事では、Tailwind CSS で任意の値を使用する方法を説明しました。