0

Tailwindscss を使用して、list-disc クラスを使用して箇条書きのスタイルを設定するにはどうすればよいですか?

私のpackage.jsonには以下が含まれます：

    "@tailwindcss/aspect-ratio": "^0.2.0",
    "@tailwindcss/forms": "^0.3.2",
    "@tailwindcss/line-clamp": "^0.2.0",
    "@tailwindcss/typography": "^0.4.0",
    "tailwindcss": "^2.1.1",
    "tailwindcss-stimulus-components": "^2.1.2",

<ul class="list-disc">/typography プラグインを使用した場合と使用しない場合の両方を使用しclass="prose"てみましたが、見た目は異なりますが、どちらも期待どおりではなく、Firefox と Chrome は同じように見えます。

ここに画像の説明を入力

コンテナーがない場合 (リスト 1) class="prose"、箇条書きは完全にスタイル設定されておらず、インデントもなく、ブラウザーの既定の箇条書きが表示されます。

class="prose"コンテナー (リスト 2) を使用すると、ぶら下げインデントと明るい箇条書きが作成されますが、ブラウザーの既定の箇条書き (二重箇条書き記号) も含まれます。

そのビューを作成するための HTML は次のとおりです。

  <div class="container mx-auto m-4">
    <h3>List 1</h3>
    <div>
       <ul class="list-disc">
        <li>Bullet one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence.</li>
        <li>Shorter second sentence. </li>
      </ul>
    </div>

    <h3>List 2</h3>
    <div class="prose">
      <ul class="list-disc">
        <li>Bullet one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence.</li>
        <li>Shorter second sentence. </li>
      </ul>
    </div>
  </div>

私は Tailwindcss にかなり慣れていないので、デフォルトの箇条書きを「リセット」する親要素を見落としている可能性がありますか?

考えられる原因: 原因はm-4コンテナー div のクラスです。マージンを追加すると、画面外にぶら下がっているブラウザーの既定の箇条書きが表示されます。

4

1 に答える 1

4

TailwindのPreflightリセットは、リストをデフォルトでスタイルなしにリセットします。list-discまたはユーティリティ クラスがないlist-decimal場合、リストには箇条書きや番号がありません。list-disc/を使用するとlist-decimal、list-style-typeプロパティが設定され、::marker疑似要素が黒丸、数字、またはその他のものに設定されます。これは、最初の例で見られる動作です。箇条書きはブラウザのデフォルトの箇条書きです。

Tailwind タイポグラフィを使用する場合、コンテンツ内でユーティリティ クラスを使用する必要はありません。使用すると、スタイルや特異性が競合するという予期しない問題が発生する可能性があります。Tailwind タイポグラフィでは、リストはデフォルトでスタイル設定されています。ただし、タイポグラフィ プラグインは で疑似要素を設定しません。代わりに、弾丸の外観をより詳細に制御できる疑似要素を使用します。::markerlist-style-type::before

Tailwind Typography とlist-discユーティリティを使用する場合、これら 2 つの方法は異なることを行うため競合しないため、両方が表示されます。暗い黒丸は::markerによって設定された疑似要素である可能性が高くlist-disc、明るいグレーの黒丸は::beforeTailwind Typography によって設定された疑似要素です。ブラウザーの DevTools を使用して疑似要素を確認し、設定されているプロパティと外観への影響を試してみてください。

この重複した動作を回避するにはlist-disc、リストからクラスを削除するだけです。Tailwind タイポグラフィ スタイルをカスタマイズする必要がある場合は、ドキュメントのカスタマイズセクションを参照してください。ソースを調べて、デフォルトのスタイルがどのように設定されているかを確認することもできます。

于 2021-06-02T08:16:18.747 に答える