How do you make a marker bold in a numbered list?

[u01jmg3]

Curious how to achieve the following in TailwindCSS?

ol li::marker { font-weight: bold }

1. Item 1
2. Item 2
3. Item 3

[wongjn]

If the rule is to apply globally, you could write that verbatim in your base @layer:

@tailwind base;
@tailwind component;
@tailwind utility;

@layer base {
  ol li:marker {
    font-weight: bold;
  }
}

See this Tailwind Play example

---

Otherwise, if it is styling for a particular <ol><li/></ol> element structure:

• For ol li portion, we can use one of these arbitrary variants:
  1. [ol_&] if applying on to the lis
  2. [&_li] if applying on to the ol
  3. [&_ol_li] if applying on to some parent container
• For ::marker portion, we can use the marker variant
• For font-weight: bold, we use the font-bold utility

This results in:

1. <div class="pl-5">
     <ol class="list-decimal">
       <li class="[ol_&]:marker:font-bold">Item 1</li>
       <li class="[ol_&]:marker:font-bold">Item 2</li>
       <li class="[ol_&]:marker:font-bold">Item 3</li>
     </ol>
   </div>

   Example

2. <div class="pl-5">
     <ol class="list-decimal [&_li]:marker:font-bold">
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
     </ol>
   </div>

   Example

3. <div class="pl-5 [&_ol_li]:marker:font-bold">
     <ol class="list-decimal">
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
     </ol>
   </div>

   Example

[u01jmg3]

Thank you - super powerful

[quantumwebco]

In tailwind 4 I just used marker:font-bold on the ol and it works