DEV Community

Cover image for Tailwind CSS List Style Marker Example
saim
saim

Posted on • Originally published at larainfo.com

Tailwind CSS List Style Marker Example

#css #tailwindcss #webdev #tutorial

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)

Read next

leemeganj profile image

Advanced Next.js caching strategies

Megan Lee -

muash10 profile image

Using Stable Diffusion in AWS Bedrock to Generate Images

Muhammed Ashraf -

nobody-99 profile image

-? What is YARN ?-

nobody-99 -

patrick_61cbc6392b72286f6 profile image

Best Practices for Writing API Documentation 📚

Patrick -