Introduction
Tailwind CSS is something that I have been exploring for quite sometime. Once I got comfortable with tailwind, I did not want to go back to using plain old CSS. A few reasons why I started to prefer tailwind:
It's very intuitive, more like writing in plain English
CSS class definitions are mentioned directly in HTML, thus I find it easy to visualize and modify
Any type of customization or design is easy to implement
I use Django a lot, thus the natural next step was to try using it in a Django project. I was quite wary of using it, especially I was not quite sure whether there will be hiccups while deploying it on cloud. Only after a fellow PDMer Arno shared his positive experience, I tried it and to my surprise, it was super simple to integrate in my local environment as well as in a cloud environment. Thanks Arno for the timely response, I'm now able to easily convert my design into web pages.
This post is not a typical tip, but a set of steps to integrate Tailwind with Django in a local environment. Let's get started.
Install Django & Create a project
Let's perform the usual steps of creating a virtual environment, followed by installing Django, and creating a project.
py -m venv venv
pip install Django
django-admin startproject djangoandtailwind
Install Tailwind CSS
In order to install Tailwind, the simplest approach that I find is using npm. If you do not have npm installed in your machine, you may want to perform that as a first step. Check their documentation for the steps to be performed.
Once Node.js and npm are installed, let's proceed with the steps required to install and configure Tailwind.
npm install -D tailwindcss
npx tailwindcss init
On executing the above commands, we should have a node_modules folder in our workspace as well as the three files
package-lock.json
package.json
tailwind.config.js
Configure tailwind.config.js
We then configure the path of the template files that will use tailwind.
/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
content: ["./djangoandtailwind/templates/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Add Tailwind directives to the main css
In the main project folder, create a folder static to hold the static assets of the project. Under static folder create a sub-folder css. Create a file and name it as input.css. Add the following directives there
@tailwind base;
@tailwind components;
@tailwind utilities;
Start the Tailwind build process
In your IDE (I use Visual Studio Code), open a terminal and execute the command below so that we can scan the template files for classes and build the required css.
We mention the path of out input.css file and specify where the output should be generated, in this case dist/output.css. --watch parameter is for hot reload so that we need not run the build command manually whenever there is a change.
On executing the command, we should see a dist folder created under static
npx tailwindcss -i ./djangoandtailwind/static/css/input.css -o ./djangoandtailwind/static/dist/output.css --watch
Now the folder structure looks like so 👇
Add compiled css to our base.html
Below html is what I generally write that serves as the base for all htmls. It is good practice to extend such base.html in all other template files.
Notice the reference to dist/output.css in the <head> section.
{% load static %}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static 'dist/output.css' %}" rel="stylesheet">
<title>{% block title %} {% endblock %}</title>
<body>
{% block content %}
{% endblock %}
</body>
</html>
Hooray 🥳, we are done with required configuration.
Let's now write a simple html and start using tailwind css. Just to keep things simple, I wrote the code for a navbar in header.html. I used a couple of tailwind classes.
<div class="m-8">
<ul class="flex text-xl flex-row justify-center space-x-16">
<li>
<a class="text-xl text-green-400" href="#">Home</a>
</li>
<li>
<a class="text-xl text-blue-400" href="#">Search</a>
</li>
<li>
<a class="text-xl text-blue-400" href="#">Recap</a>
</li>
<li>
<button class="bg-purple-300 p-2 rounded-lg font-satisfy text-xl border-font-semibold hover:bg-transparent hover:border-purple-100 hover:border-solid hover:border-2">Get Started for free</button>
</li>
</ul>
</div>
Finally a home.html where I simply included the required files and gave a h1 tag and a h3 tag.
{% extends "base\base.html" %}
{% load static %}
{% block title %} Django and Tailwind {% endblock %}
{% block content %}
{% include "../base/header.html" %}
<h1 class="p-20 text-4xl text-center text-green-500">A simple page using Tailwind!</h1>
<h3 class="text-2xl text-center text-purple-700">Pretty impressive 😁</h3>
{% endblock %}
On starting the development server, this is how the home page looks like:
static related properties and DIRS under TEMPLATES folder like so 👇STATIC_URL = "static/"
STATICFILES_DIRS = [BASE_DIR / "djangoandtailwind" / "static"]
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
"DIRS": [os.path.join(BASE_DIR, "djangoandtailwind", "templates")],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
Conclusion
As we can see, it's not a lot to integrate Tailwind in a Django project. Quite simple and straight forward. Once we have the design for a page in hand, even a back end developer will be able to easily define the CSS classes (Psstt..I'm a back end heavy person).
Do give it a try and let me know how it goes 🤩