Styling with TailwindCSS

Improvements to our base.html to work across apps

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

New files

templates/base.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Djangocourse</title>
  <link rel="stylesheet" href="{% static 'output.css'%}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
  <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
</head>
<body>
  {% url 'create_article' as create_new_url %}
  {% url 'home' as your_articles_url %}
  {% url 'account_email' as change_email_url %}
  <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="{% spaceless %}{% if request.path != create_new_url %} {{ create_new_url }} {% else %} # {% endif %}{% endspaceless %}">
            Create new
          </a>
          <a
            class="hover:shadow-underline hover:shadow-gray-300 {% if request.path == your_articles_url %} font-semibold {% endif %}"
            href="{{ your_articles_url }}">
            Your articles
          </a>
          <a
            class="hover:shadow-underline hover:shadow-gray-300 {% if request.path == change_email_url %} font-semibold {% endif %}"
            href="{{ change_email_url }}">
            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 base_content %}

  {% endblock base_content %}
  <footer>Common footer for all templates</footer>
  {% block page_js %}

  {% endblock page_js %}
</body>
</html>

templates/allauth/layouts/base.html

{% extends "base.html" %}

{% block base_content %}
<div>
  {% block content %}

  {% endblock content %}
</div>
{% endblock base_content %}

Modified files

templates/app/home.html

--- 
+++ 
@@ -1,7 +1,7 @@
-{% extends "app/base.html" %}
+{% extends "base.html" %}
 {% load humanize %}

-{% block content %}
+{% block base_content %}
 <main class="max-w-7xl mx-auto mt-10 p-2 md:p-4 lg:p-10">
   <h1 class="title mb-4">Welcome</h1>

@@ -34,4 +34,4 @@
     <p>You have no articles yet.</p>
   {% endif %}
 </main>
-{% endblock content %}+{% endblock base_content %}

templates/app/article_delete.html

--- 
+++ 
@@ -1,6 +1,6 @@
-{% extends "app/base.html" %}
+{% extends "base.html" %}

-{% block content %}
+{% block base_content %}
 <main class="max-w-2xl mx-auto flex flex-col items-center mt-10">
   <h1 class="subtitle mb-2">Delete Article</h1>
   <p class="text-lg mb-6">Are you sure you want to delete "{{ article.title }}"?</p>
@@ -11,4 +11,4 @@
     <a href="{% url 'home' %}" class="button secondary"> {% include "svgs/arrow-left.svg" with class="inline-block w-6 h-6 mt-[-2px] mr-2" %} No, take me back</a>
   </form>
 </main>
-{% endblock content %}+{% endblock base_content %}

templates/app/layouts/base_form.html

--- 
+++ 
@@ -1,8 +1,8 @@
-{% extends "app/base.html" %}
+{% extends "base.html" %}

 {% load widget_tweaks %}

-{% block content %}
+{% block base_content %}
 <main class="max-w-7xl mx-auto mt-10">
   <form method="POST">
     {% csrf_token %}
@@ -31,7 +31,7 @@
     {% endblock buttons %}
   </form>
 </main>
-{% endblock content %}
+{% endblock base_content %}

 {% block page_js %}
 <script>

templates/account/login.html

--- 
+++ 
@@ -1,9 +1,9 @@
-{% extends "app/base.html" %}
+{% extends "base.html" %}

 {% load widget_tweaks %}
 {% load allauth account %}

-{% block content %}
+{% block base_content %}
 <main class="max-w-lg mx-auto mt-10">
   <div class="flex flex-col bg-gray-800 text-white p-6 lg:p-16 rounded-md">
     <div class="flex flex-col text-center">
@@ -51,4 +51,4 @@
     </form>
   </div>
 </main>
-{% endblock content %}+{% endblock base_content %}

templates/account/signup.html

--- 
+++ 
@@ -4,7 +4,7 @@
 {% load widget_tweaks %}


-{% block content %}
+{% block base_content %}
 <main class="max-w-7xl mx-auto mt-10 lg:mt-20">
   <div class="flex flex-col items-center lg:flex-row lg:items-start space-y-6">
     <div class="basis-3/5 lg:mt-10">
@@ -77,4 +77,4 @@
     </div>
   </div>
 </main>
-{% endblock content %}+{% endblock base_content %}