Tailwind でリスト スタイル タイプを設定する方法

ユーザーが Web ページのアイテムのリストを作成する必要があるとします。設計プロセスを容易にするために、Tailwind はリスト要素のタイプ、位置、配置を変更するために使用できるさまざまなリスト スタイル クラスを提供します。

この記事では、Tailwind でリストのスタイル タイプを設定する手順を説明します。

Tailwind でリスト スタイル タイプを設定するにはどうすればよいですか?

Tailwind には 3 つのデフォルトのリスト スタイル タイプが用意されています。それらは「」を提供するために使用されます。 マーカー リスト項目のスタイル。 3 つのデフォルトのリスト スタイル タイプ クラスについては、次のように説明します。

• リストディスク: このクラスは、リスト マーカーとして丸い箇条書きポイントを提供します。
• リスト 10 進数: このクラスは、リスト マーカーとして 10 進数を提供します。
• リストなし: このクラスは、項目からリスト マーカーを削除します。

リスト スタイル タイプを使用するための構文は次のとおりです。

理解を深めるために、以下に示すデモでは、上で定義した構文を使用して、リスト項目にさまざまなマーカー スタイルを提供します。この例では、Tailwind のデフォルトのリスト スタイル クラスを使用して、3 つのリスト要素が作成され、さまざまなマーカー スタイルが提供されます。

上記のコードの説明は次のとおりです。

• 「

  ” 要素は” で作成されます XL 「フォントサイズと」 大胆な 」のフォントの太さ。要素のテキストコンテンツは、「」を使用して中央に配置されます。 テキストセンター ' クラス。

• 改行の後に「」
  ” 要素が作成され、” が提供されます。 フレックス ' クラス。これにより、子アイテムを水平方向に整列させるコンテナが作成されます。
• ” 中央揃え ”クラスはアイテムをコンテナの中央に配置します。
• ” スペース-x-{サイズ} ” クラスは項目間の水平方向のスペースを提供します。
• ” bg-{色}-{数字} 」クラスは、コンテナの背景を指定された色に設定します。
• ” 丸みを帯びたLG ”クラスはコンテナの角を丸くします。
• ” MX-4 ” クラスは、フレックス コンテナーに水平方向のマージンを提供します。
• ” p-2 ” クラスは、フレックス コンテナーにパディングを提供します。
• 次に、3 つのリスト要素が作成され、「」を使用して異なるリスト スタイル タイプが提供されます。 リスト-{タイプ} ' クラス。

出力：

以下の出力から、最初のリストでは箇条書きが使用され、2 番目のリストでは 10 進数が使用され、3 番目のリストでは項目マーカーが使用されていないことがわかります。

Tailwind での状態バリアントでのリスト スタイル クラスの使用

リスト スタイル クラスを Tailwind のデフォルトの状態バリアントとともに使用すると、デザインをより動的にすることができます。ホバー、フォーカス、およびアクティブ状態のバリアントを使用すると、指定した状態がトリガーされるたびに、ユーザーはリスト項目のマーカー スタイルを変更できます。状態バリアントでリスト スタイル クラスを使用するための構文は次のとおりです。

以下は、リスト スタイル タイプを「ホバー」状態で使用する例です。ユーザーはリスト ブロック上にマウスを置くことでマーカー スタイルを変更できます。

上記のコードでは、リストに「 リストディスク 」クラスをデフォルトのリストスタイルタイプとして使用します。ただし、「」を使用すると、 ホバー:リスト 10 進数 ” クラスでは、ユーザーがリスト ブロック上にマウス カーソルを置くと、リスト スタイル タイプが変更されます。

出力：

以下の出力は、カーソルをリスト ブロックの上に置くと、リスト タイプのスタイルが箇条書きリストから番号付きリストに変わることを示しています。

Tailwind でブレークポイントを使用したリスト スタイル クラスの使用

ブレークポイントは、さまざまな画面サイズのレイアウトをレスポンシブに設計するために使用されます。 Tailwind によって提供される 5 つのデフォルト ブレークポイントは、sm、md、lg、xl、および 2xl です。次の構文は、リスト タイプ スタイル クラスにブレークポイントを提供するために使用されます。

以下はリスト スタイル タイプを「」で使用する例です。 MD 」ブレークポイント。画面サイズが「md」ブレークポイントに達すると、マーカーのスタイルが変更されます。

上記のコードでは、リストに「 リストディスク ” クラスをデフォルトのスタイルとして使用します。ただし、「」を使用すると、 md:リスト-10 進数 」クラスのリスト スタイル タイプは、「md」画面サイズに合わせて変更されます。

出力：

以下の出力でわかるように、画面サイズが「 MD ” ブレークポイント。

Tailwind でリスト スタイル タイプを設定する方法は以上です。

結論

Tailwind には、要素のリスト スタイルを変更するための 3 つの事前定義されたリスト スタイル タイプ クラスが用意されています。 ” リストディスク 」クラスは、項目をリストするための箇条書きを提供します。 ” リスト 10 進数 ” クラスは項目をリストするための番号を提供します。 ” リストなし 」クラスは項目マーカーを使用しないリストを作成します。この記事では、Tailwind でリストのスタイル タイプを設定する手順を説明しました。