Day 2: hover, underline, list-disc, and px-*

I like it when links hovered over are underlined. I learned how to do this in Tailwind CSS today by adding hover:underline to a tags. Here's an example:

<a
  class="text-blue-600 hover:underline"
  href="https://dev.to/feldroy/day-2-hover-underline-list-disc-and-px-3apn">
    Day 2: hover, underline, list-disc, and px-*
</a>

On my Glitch project, I'm organizing links to my dev.to posts like the one you're reading by putting them in an unordered list. To my surprise, using this code:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Gave me this result:

That almost works. I like my unordered lists to have bullets. The docs told me to use list-disc in a class on the ul element, so I did. And I got:

Hmmm... the bullets appear but they are at the edge of the containing div. Then I remembered that Tailwind CSS makes it easy to adjust horizontal padding through the use of the px-* classes. After a little experimentation, I settled on px-6. This is how it looks now:

And the code for the list:

<ul class="list-disc px-6">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>    

Finally I put in my content:

<ul class="list-disc px-6">
  <li>
    <a 
      class="text-blue-600 hover:underline" 
      href="https://dev.to/feldroy/day-1-building-a-page-after-a-css-reset-1dif">
        Day 1: Building a Page After a CSS Reset
    </a>
  </li>
  <li>
    <a class="text-blue-600 hover:underline" 
       href="https://dev.to/feldroy/day-2-hover-underline-list-disc-and-px-3apn">
         Day 2: hover, underline, list-disc, and px-*
    </a>
  </li>
</ul>

Here is today's code on glitch.