DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Tailwind CSS List Style Marker Example
larainfo
larainfo

Posted on • Originally published at larainfo.com

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>
Enter fullscreen mode Exit fullscreen mode

tailwind bullet list style marrker

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>
Enter fullscreen mode Exit fullscreen mode

tailwind css list style number marker color

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>
Enter fullscreen mode Exit fullscreen mode

tailwind custom bullet list color

Top comments (0)

Create an Account!
Now it's your turn!
Β 
πŸ—’ Share a tutorial
πŸ€” Reflect on your coding journey
❓ Ask a question

Create an account to join hundreds of thousands of DEV members on their journey.