In this post I will describe how to add the tailwindcss framework to a Django project.
The example which follows was developed on Windows 10 with VS Code, Django 3.2.9, tailwindcss 3.0.8
Start Here
If you don’t have a Django project to hand, you can clone the example I will be using throughout the rest of this post from GitHub.
Viewing the project in VS Code, container is the root directory and within this there is mysite which is the Python package for this Django project and polls is an application whose functionality is to render a HTML page.
Running the project via the command: python manage.py runserver displays Hello World!
tailwindcss installation and configuration
Open the project in VS Code and within the container directory create a directory called jstoolchain
Start a new integrated terminal session and navigate to jstoolchain and create a package.json file by running the command:
npm init -y
Remaining in the jstoolchain directory install tailwindcss, postcss-cli and autoprefixer
npm install tailwindcss postcss-cli autoprefixer
Create a tailwind.config.js file
npx tailwind init
Create a new file called postcss.config.js and add the following:
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
Create a new directory called css and navigate into it. Within this directory create a new file called tailwind.css and add the following:
@tailwind base;
@tailwind components;
@tailwind utilities;
Within the package.json file add the following to the scripts key:
"scripts": {
"build": "postcss css/tailwind.css -o ../static/css/tailwind-output.css"
},
Replace the existing contents of tailwind.config.js with:
module.exports = {
content: ["../polls/templates/polls/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
At this point tailwindcss has been set up and the jstoolchain folder should look like this:
Adding tailwind references to the Django Templates
Open the template container\mysite\templates\mysite\base.html and add the following stylesheet reference to the head section
<link rel="stylesheet" type="text/css" href="{% static 'css/tailwind-output.css' %}">
The complete base.html file is shown below with the new link element highlighted.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/tailwind-output.css' %}">
<title>{% block title%}{% endblock title %}</title>
</head>
<body>
<div id="content">
{% block content %}{% endblock content %}
</div>
</body>
</html>
The final template change is to replace the existing contents of container\polls\templates\polls\index.html with the following:
{% extends "base.html" %}
{% block content %}
<h1 class="font-sans text-3xl font-bold underline">
Hello world!
</h1>
<p class="font-sans">The quick brown fox jumped over the lazy dog</p>
<p class="font-serif">The quick brown fox jumped over the lazy dog</p>
<p class="font-mono">The quick brown fox jumped over the lazy dog</p>
<div class="h-14 bg-gradient-to-r from-cyan-500 to-blue-500"></div>
<div class="h-14 bg-gradient-to-r from-sky-500 to-indigo-500"></div>
<div class="h-14 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
<div class="h-14 bg-gradient-to-r from-purple-500 to-pink-500"></div>
<div class="bg-blue-500 rounded shadow border p-6 w-64">
<h5 class="text-3xl font-bold mb-4 mt-0">My Title</h5>
<p class="text-gray-700 text-sm">Content goes here</p>
</div>
<button type="button" class="py-2 px-3 bg-cyan-500 hover:bg-cyan-600 text-white text-sm font-semibold rounded-md shadow focus:outline-none" tabindex="-1">
Subscribe
</button>
<button type="button" class="bg-gradient-to-r from-teal-400 to-blue-500 hover:from-pink-500 hover:to-orange-500 text-white font-semibold px-6 py-3 rounded-md">
Hover me
</button>
{% endblock content %}
This HTML displays various tailwindcss classes such as fonts, colours, cards and buttons and is a useful test that tailwindcss is correctly installed.
Build it!
The final step is to start a new terminal session and navigate to the jstoolchain directory and run the build command:
cd container\jstoolchain
npm run-script build
Once this command has completed successfully there will be a new file, tailwind-output.css located at container\static\css
Run the Django project python manage.py runserver and now the Hello World displays several of the tailwindcss classes.
Workflow overview
If tailwindcss classes are added or removed from a template you will need to remember to rerun npm run-script build which is not ideal. It would be better to automate this step so in an upcoming post I will describe how this can be achieved.
Wait, it doesn’t work
The problem with posts like these both as a reader and as the author is there the assumption that if you have followed all the steps it will just work but I know from my own experience that is not always true. If something doesn’t work or you are seeing errors, compare what you have done with the tailwindcss branch of the project I have used throughout this post which is the complete and working (well on my machine!) version.
Acknowledgements
Thank you to the author of this answer on Stackoverflow which was the starting point for this post.
iancarpenter.dev 