dataprismcore3.cyou

p]:inline” data-streamdown=”list-item”>Risks and Rewards of Micro-Cap Companies: What Investors Need to Know

Written by

pw

in

list-inside list-disc whitespace-normal [li&]:pl-6

This article explains the Tailwind CSS utility class combination list-inside list-disc whitespace-normal [li&]:pl-6, what each part does, and practical examples for using it to style lists in modern web layouts.

What each utility does

  • list-inside: Positions the list markers (bullets) inside the content box so they align with the first line of list item text rather than hanging outside.
  • list-disc: Uses a filled circle (disc) as the list marker.
  • whitespace-normal: Collapses whitespace and allows text wrapping at normal word boundaries; useful to ensure long list item text wraps normally.
  • [li&]:pl-6: A variant using the arbitrary selector syntax to apply pl-6 (padding-left: 1.5rem) to direct child li elements of the element the class is applied on. This increases the left padding of each list item for consistent alignment when using list-inside.

Why combine these utilities

    &]:pl-6” data-streamdown=“unordered-list”>

  • Combining list-inside with list-disc ensures bullets are visible and aligned with wrapped lines.
  • whitespace-normal prevents odd wrapping behavior caused by preformatted spacing or utility conflicts.
  • The arbitrary selector [li&]:pl-6 lets you add per-item padding without extra CSS, keeping markup clean and utilizing Tailwind’s JIT features for scoped styling.

When to use

    &]:pl-6” data-streamdown=“unordered-list”>

  • When list items contain long paragraphs or inline elements and you need bullets to align with wrapped text.
  • When you want consistent left spacing for list items without modifying global list styles.
  • In component libraries or cards where you want list styling encapsulated.

Example HTML

html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item</li>  <li>Long item that wraps onto multiple lines to demonstrate how the bullet aligns with the first line and the padding applies to wrapped lines as well.</li>  <li>Item with <a href=”#”>inline link</a> and other elements.</li></ul>

Notes and browser considerations

    &]:pl-6” data-streamdown=“unordered-list”>

  • The arbitrary selector syntax ([li&]:pl-6) requires a Tailwind CSS setup that supports JIT and arbitrary variants (Tailwind v3+).
  • If using older browsers, ensure Tailwind’s generated CSS is included and test for alignment—some legacy browsers may render list markers slightly differently.
  • If you prefer bullets outside the content box, use list-outside instead of list-inside and adjust padding accordingly.

Alternatives

    &]:pl-6” data-streamdown=“unordered-list”>

  • Use a wrapper class with custom CSS if you need more complex selector logic or need to support environments without Tailwind JIT.
  • For precise control over marker positioning, consider pseudo-element techniques (::marker) with custom styles.

This combination provides a compact, Tailwind-native way to create readable, well-aligned bulleted lists in responsive designs._

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts