DEV Community

Cover image for Tailwind CSS List Style Marker Example
saim
saim

Posted on • Originally published at larainfo.com

7

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more