cosmicrelayhub5.xyz

Streaming

Written by

ge9mHxiUqTAm

in

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

What this utility-class combination does

This string looks like a set of Tailwind CSS utility classes combined with an arbitrary variant selector:

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

  • list-inside — positions list markers (bullets) inside the content box so bullets align with text wrap.
  • list-disc — uses filled circle bullets for unordered lists.
  • whitespace-normal — allows normal wrapping and collapsing of whitespace.
  • [li&]:pl-6 — an arbitrary selector targeting list items when the parent selector matches; it applies left padding (pl-6) to list items. The selector syntax [li&]:pl-6 is a variant that compiles to a selector like li .your-class or, depending on tooling, targets li descendants—its exact output depends on your Tailwind config and processor.

When to use it

Use this combination when you want a bulleted list where:

  • Bullets stay attached to wrapped lines (list-inside).
  • You prefer disc-style bullets (list-disc).
  • Text wraps naturally (whitespace-normal).
  • Each list item has consistent left padding to create visual indentation separate from the bullet.

Example HTML

html
<ul class=“list-inside list-disc whitespace-normal [li&]:pl-6”><li>Short item</li>  <li>Long item that wraps to multiple lines to demonstrate how the bullet and padding behave across wrapped text, ensuring lines align cleanly.</li>  <li>Another item</li></ul>

Notes and compatibility

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

  • Tailwind version: arbitrary variants and the exact arbitrary selector behavior require Tailwind v2.2+ (arbitrary variants matured in v3). Check your Tailwind config if the [li_&] syntax doesn’t compile—your setup or plugin may need enabling.
  • The computed CSS depends on how the arbitrary selector is interpreted; test the output in your build. If the selector doesn’t produce the intended rule, you can achieve the same effect with a simple descendant selector in your stylesheet:
css
ul.custom-list > li { padding-left: 1.5rem; } /* pl-6 = 1.5rem */

Accessibility tip

Maintain sufficient contrast and consider using larger hit targets for long lists. If list items are interactive, ensure keyboard focus styles are visible and bullets aren’t relied on as the sole visual cue.

Quick summary

This utility set produces internally aligned disc bullets with normal wrapping and extra left padding on list items—useful for readable, neatly indented bulleted lists in UIs.

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

More posts