Tailwind CSS List Style Marker Example

In this section we will see list style marker in tailwind css. We will see tailwind list bullet color, number list color, custom list style color with Tailwind CSS.
view

Example 1

tailwind css list bullet color using tailwind marker class.

<ul class="pl-5 space-y-3 text-gray-600 list-disc marker:text-blue-600">
  <li>Tailwind CSS list style with marker class 1</li>
  <li>Tailwind CSS list style with marker class 2</li>
  <li>Tailwind CSS list style with marker class 3</li>
</ul>

Example 2

tailwind css list style number color using tailwind marker class.

<ul class="pl-5 space-y-3 text-gray-600 list-decimal marker:text-purple-600">
  <li>Tailwind CSS list style with marker class 1</li>
  <li>Tailwind CSS list style with marker class 2</li>
  <li>Tailwind CSS list style with marker class 3</li>
</ul>

Example 3

tailwind css list style custom color using tailwind marker.

<ul class="pl-5 space-y-3 text-gray-600 list-disc marker:text-[#ff0000]">
  <li>Tailwind CSS list style with marker custom color </li>
  <li>Tailwind CSS list style with marker custom color </li>
  <li>Tailwind CSS list style with marker custom color </li>
</ul>