Styling with TailwindCSS

Customize your TailwindCSS theme by creating a box shadow underline

Want more?

This lesson for enrolled students only. Join the course to unlock it!

You can see the code changes implemented in this lecture below.

If you have purchased the course in a different platform, you still have access to the code changes per lecture here on Teclado. The lecture video and lecture notes remain locked.

Join course for $15

Modified files

tailwind.config.js

--- 
+++ 
@@ -2,7 +2,11 @@
 module.exports = {
   content: ["./templates/**/*.html"],
   theme: {
-    extend: {},
+    extend: {
+      boxShadow: {
+        underline: "inset 0 -2px 0 0"
+      }
+    },
   },
   plugins: [],
 }

templates/app/base.html

--- 
+++ 
@@ -13,18 +13,18 @@
 <body>
   <nav class="px-10 py-4 border-b border-gray-300 shadow-md">
     <div class="flex justify-end items-center gap-6 max-w-7x mx-auto">
-      {% if user.is_authenticated %}
-      <a class="button primary" href="{% url 'create_article' %}">Create new</a>
-      <a class="" href="{% url 'home' %}">Articles</a>
-      <a class="" href="{% url 'account_email' %}">Change email</a>
-        <form method="POST" action="{% url 'account_logout' %}">
-          {% csrf_token %}
-          <button type="submit">Log out</button>
-        </form>
-      {% else %}
-        <a class="button secondary text-sm" href="{% url 'account_login' %}">Log in</a>
-        <a class="button primary text-sm" href="{% url 'account_signup' %}">Sign up</a>
-      {% endif %}
+        {% if user.is_authenticated %}
+        <a class="button primary" href="{% url 'account_signup' %}">Create new</a>
+        <a class="hover:shadow-underline hover:shadow-gray-300" href="{% url 'home' %}">Articles</a>
+        <a class="hover:shadow-underline hover:shadow-gray-300" href="{% url 'account_email' %}">Change email</a>
+          <form method="POST" action="{% url 'account_logout' %}">
+            {% csrf_token %}
+            <button class="hover:shadow-underline hover:shadow-gray-300" type="submit">Log out</button>
+          </form>
+        {% else %}
+          <a class="button secondary text-sm" href="{% url 'account_login' %}">Log in</a>
+          <a class="button primary text-sm" href="{% url 'account_signup' %}">Sign up</a>
+        {% endif %}
     </div>
   </nav>
   {% block content %}