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.