How Tailwind Helped me Write Better Markup

I was refactoring my site's footer and realized that all the divs I previously used for creating groups and classes could all be replaced by tailwind utilities on the actual semantic elements themselves. At least, usually that is the case.

For example:

 <footer class="footer text-white bg-black mt-4 mx-auto px-2 grid lg:grid-cols-3 grid-cols-1 gap-4">
-  <div class="contact text-center lg:text-left lg:ml-2">
-    <p class="my-2">
+  <p class="text-center lg:text-left lg:ml-2 my-2">
     ...
-    </p>
-  </div>
+  </p>
   ...

Notice how the div and the classes it used for control or relevance are now superfluous.

I was also inspired to be more semantic with my footer elements. I had some links there for my other outlets online. They were just listed, one per line, in a p tag.

I decided that no, indeed this is a list of links. So I should mark it up as such. eg:

-  <div class="contact text-center">
-    <p class="my-2">
-      <a class="hover:underline" href="https://bitbucket.com/sholsinger">bitbucket.com/sholsinger</a><br />
       ...
+  <ul class="my-2 text-center" title="External Links">
+    <li><a class="hover:underline" href="https://github.com/sholsinger" title="My Github Account">github.com/sholsinger</a></li>
     ...

You can see in the above change that I've also added a title attribute to both the container and the link element.

Never again shall I use a div so frivoulously. 🤞🏼