Use of `marker` Variant

Use the `marker` variant in TailwindCSS to style list bullets and numbers.

The marker variant in TailwindCSS allows you to style the bullets or numbers of list items. This is useful for adding a unique touch to your lists, enhancing the overall user experience.

Basic Usage

You can use the marker variant to apply styles to the bullets or numbers of list items.

Over 60 expert-crafted tips
One-time payment, no recurring fees
Lifetime access to all updates
33 tips available now, 60+ tips at launch

<ul className="max-w-md space-y-2 list-disc text-body marker:text-indigo-500">
    <li> Over 60 expert-crafted tips</li>
    <li> One-time payment, no recurring fees </li>
    <li> Lifetime access to all updates </li>
    <li> 33 tips available now, 60+ tips at launch </li>
</ul>

With Hover Effect

You can also change the marker style on hover.

Over 60 expert-crafted tips
One-time payment, no recurring fees
Lifetime access to all updates
33 tips available now, 60+ tips at launch

<ul className="max-w-md space-y-2 list-disc text-body marker:text-indigo-500 *:hover:marker:text-indigo-800">
    <li> Over 60 expert-crafted tips</li>
    <li> One-time payment, no recurring fees </li>
    <li> Lifetime access to all updates </li>
    <li> 33 tips available now, 60+ tips at launch </li>
</ul>

Advanced Usage

With Custom Marker (content)

You can customize the marker content using the content property.

Over 60 expert-crafted tips
One-time payment, no recurring fees
Lifetime access to all updates
33 tips available now, 60+ tips at launch

<ul className="max-w-md list-disc text-body *:py-1 *:pl-2 marker:[content:'✧'] marker:text-sm">
    <li> Over 60 expert-crafted tips</li>
    <li> One-time payment, no recurring fees </li>
    <li> Lifetime access to all updates </li>
    <li> 33 tips available now, 60+ tips at launch </li>
</ul>

Change Marker content on hover

You can change the marker content on hover for a more interactive experience.

Over 60 expert-crafted tips
One-time payment, no recurring fees
Lifetime access to all updates
33 tips available now, 60+ tips at launch

<ul className="max-w-md list-disc text-body *:py-1 *:pl-2 marker:[content:'✧'] marker:text-sm *:hover:marker:[content:'✦']">
    <li> Over 60 expert-crafted tips</li>
    <li> One-time payment, no recurring fees </li>
    <li> Lifetime access to all updates </li>
    <li> 33 tips available now, 60+ tips at launch </li>
</ul>

Custom Marker for each list item

You can apply different markers to each list item.

Over 60 expert-crafted tips
One-time payment, no recurring fees
Lifetime access to all updates
33 tips available now, 60+ tips at launch

<ul className="max-w-md list-disc text-body *:py-1 *:pl-2">
    <li className="marker:[content:'✗'] marker:text-red-400"> Over 60 expert-crafted tips</li>
    <li className="marker:[content:'✗'] marker:text-red-400"> One-time payment, no recurring fees </li>
    <li className="marker:[content:'✓'] marker:text-emerald-400"> Lifetime access to all updates </li>
    <li className="marker:[content:'✓'] marker:text-emerald-400"> 33 tips available now, 60+ tips at launch </li>
</ul>

Custom Marker with Emoji

You can also use emojis as markers for a more playful design.

Over 60 expert-crafted tips
One-time payment, no recurring fees
Lifetime access to all updates
33 tips available now, 60+ tips at launch

<ul className="max-w-md list-disc text-body *:py-1 *:pl-2 marker:[content:'👉🏻'] marker:text-base">
    <li> Over 60 expert-crafted tips</li>
    <li> One-time payment, no recurring fees </li>
    <li> Lifetime access to all updates </li>
    <li> 33 tips available now, 60+ tips at launch </li>
</ul>

Conclusion

Using the marker variant in TailwindCSS allows you to style list bullets and numbers, adding a unique touch to your lists. By leveraging this variant, you can create more dynamic and visually appealing lists, enhancing the overall user experience.

On this page