Django + Tailwind Simplified

As we know, Django is a powerful web framework that allows you to handle both backend and frontend solutions, today we will be amplifying the frontend side of django with the powerful Tailwind css framework. I’m assuming you have some knowledge in django and tailwind.

Our result at the end

Let’s get started

First create a new django project in your desired folder, for the sake of this post, my project name will be django_tailwind.

django-admin startproject django_tailwind

Now navigate to your project directory and create a folder called theme (You can name it whatever you want).

mkdir theme

To view our results properly, we are going to create a dummy app

python manage.py startapp dummy

now, your project structure should look like this:

django_tailwind
 |_django_tailwind
 |_dummy
 |_theme
 |_manage.py

What we are trying to achieve is the complete seperation of design and logic. We are going to add all of django static files and templates into the theme folder. To do that, let’s go the theme folder and initiate tailwind

cd theme
# generate an npm project
npm init -y
# install tailwind
npm install -D tailwindcss
# initiate tailwind
npx tailwindcss init

Next we are going to create the templates, static and src folders in the theme folder.

mkdir templates static src

in your src folder, create a css file named input.css and add this to it

@tailwind base;
@tailwind components;
@tailwind utilities;

your theme folder should look something like this

In your tailwind.config.js add this line to the content: []

"./templates/**/*.{html,js}"

You should have something like this

In our package.json we are going to add the following npm scripts

...
"tailwind-watch": "tailwindcss -i ./src/input.css -o ./static/css/output.css --watch",
"tailwind-build": "tailwindcss -i ./src/input.css -o ./static/css/output.css --minify"
...

Results should be

Next, in your template folder, we’ll create a base.html file, i’ll create mine in a layouts folder. When done, add this the follwing code to the base template(you can modify it afterwards to suit your needs).

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Tailwind + Django</title>
<link rel="stylesheet" href="{% static 'css/output.css' %}">
 </head>
<body class="bg-grey-lightest font-serif leading-normal tracking-normal">
<div class="container mx-auto ">
   <section class="flex items-center justify-center h-screen">
    <h1 class="text-5xl font-sans">Django + Tailwind = ❤️</h1>
   </section>
</div>
</body>
</html>

(Notice when calling the stylesheet we used {% static 'css/output.css' %} ? this will be that file that the tailwind load the css to, and it will be used for all css purposes in the project like the normal stytles.css).

Modifying the settings.py

In our settings.py we are going to make some changes to ensure django serve the static files.

Get Floyd A. Morgan Jr’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

First we are going to add the dummy app we created to the installed apps

Next, we should make sure django will read the templates from our theme folder. we’ll add (BASE_dir/'theme/templates') to'DIRS': [] like so:

Now, using django mechanicsm to load static files, we are going to modify it to load static files from the theme folder. Frst at the top, add import os like so:

imported os to avoid PosixPath error when creating static_dir

Next we create a STATIC_DIRS to read static files from the theme folder

# add this
STATICFILES_DIRS = [os.path.join(BASE_DIR, "theme/static/")]

result should be like this:

setting up the view from the ‘dummy’ app

In your dummy app, go to views.py and add the following(remeber which directory your base template is located):

# Create your views here.
def index(request):
   return render(request, 'layouts/base.html')

next, create a urls.py in your dummy app and add:

from django.urls import path
from .views import index
urlpatterns = [
    path('', index, name='index'),
]

in your project main url file(located in the same directory as your settings.py), add the following:

urlpatterns = [
path('admin/', admin.site.urls),
path('', include('dummy.urls')), # new
]

this should complete the configurations,. Now run the command in the theme folder to load the tailwind css (src/input.css) to the css file in the static folder (static/css/output.css):

npm run tailwind-watch

to view the reuslts in your browser, run:

python manage.py runserver

P.s: make migrations if needed.

Results:

project git: https://github.com/gr1nch3/django_tailwind.git