Django + Tailwind Simplified
Tags: django, tailwindcss, css, python
Published: 2022-10-02 17:54:33

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](https://cdn-images-1.medium.com/max/3198/1*x3G8saaBiHg1SRG_c-CKxw.png)

## 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 staic 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](http://twitter.com/tailwind) base;
    [@tailwind](http://twitter.com/tailwind) components;
    [@tailwind](http://twitter.com/tailwind) utilities;

your theme folder should look something like this

![](https://cdn-images-1.medium.com/max/2000/1*J8mEWyEsLs5qo-Ss8jy3Jg.png)

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

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

You should have something like this

![](https://cdn-images-1.medium.com/max/2000/1*KEWbExDtAvh_XA03KPks3w.png)

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

![](https://cdn-images-1.medium.com/max/2000/1*WKsTC6H6sU4RjGQRBEsQtg.png)

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 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.

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

![](https://cdn-images-1.medium.com/max/2000/1*oYijs7BaqNeraBSA6FvHEQ.png)

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:

![](https://cdn-images-1.medium.com/max/2000/1*IIJnwXFt7pD3wbtW8NhcKg.png)

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](https://cdn-images-1.medium.com/max/2000/1*nkOLD9TLgjE65RuluuAiig.png)

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:

![](https://cdn-images-1.medium.com/max/2000/1*sdIoPYZqpMHH4DgHKFLrZQ.png)

## 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:

![](https://cdn-images-1.medium.com/max/3200/1*mARkcp5iPtB-AOhePSX4jw.png)

project git: [https://github.com/gr1nch3/django_tailwind.git](https://github.com/gr1nch3/django_tailwind.git)