Tailwind is all over the place, it has gained quite a lot of traction in the last years. I was hesitant at first but it eventually grew into me and here we are!
TLDR: If you want to skip this post just clone the final boilerplate here and follow the installation instructions.
Previously, if you wanted to use Tailwind on Django you had to have Node.js and npm installed to use it.
NPM is not common in Django’s ecosystem so installing Tailwind came with a bunch of headaches but those days are gone.
Adam and his amazing team at Tailwind Labs recently released Tailwind’s Standalone CLI, a self-contained executable that you can use just like the regular Tailwind’s CLI but without Node.
Getting Started
Go to your Django’s project directory and grab the executable for your platform from the latest release on GitHub, making sure to give it executable permissions:
# Example for macOS arm64
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
mv tailwindcss-macos-arm64 tailwindcss
On your static/css folder create a file called input.css and add these directives:
@tailwind base;
@tailwind components;
@tailwind utilities;
Then create a file called output.css. Leave that empty (the CLI will take care of this) and import this asset on your template:
<!-- home.html -->
...
<link rel="stylesheet" type="text/css" href="{% static 'css/output.css' %}">
...
Now let’s create a tailwind.config.js file using the CLI:
./tailwindcss init
That’s the file you will be editing if you want to override or extend the default Tailwind config. You can read more about it here.
The first config setting that we are going to use is content.
We will pass a path to the files that we want to watch for Tailwind classes.
module.exports = {
content: ["./django_tailwind_boilerplate/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
With the above setup, we are telling the CLI watcher to check every .html and .js file in the project.
⚠️ You should never conditionally construct utility classes. Doing this (
’text-${hasError ? ‘red’ : ‘green’}-400) because it will prevent the watcher from picking up the styles.
To fix this example do:{hasError ? ‘text-red-400’ : ‘text-green-400’}.
Now run the CLI watcher:
./tailwindcss -i static/css/input.css -o static/css/output.css --watch
You will notice that output.css now has a Tailwind’s preflight (a CSS reset). This will help you address cross-browser inconsistencies and start a project with a good set of default CSS attributes.
We can add any of Tailwind utility classes to our templates and the watcher will immediately add it to output.css
<!-- home.html -->
...
<body>
<main class="flex items-center justify-center w-full h-screen">
<h1 class="text-4xl text-[#51BE95] font-mono">Hello Tailwind</h1>
</main>
</body>
// output.css
// preflight classes
.static {
position: static;
}
.flex {
display: flex;
}
.h-screen {
height: 100vh;
}
.w-full {
width: 100%;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.font-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-\[\#51BE95\] {
--tw-text-opacity: 1;
color: rgb(81 190 149 / var(--tw-text-opacity));
}
⭐Bonus Tip
Django will restart the server on every change on .py files but if you want to see your changes on template files you will need to reload your browser.
To improve that experience, install django-browser-reload. After that, any changes you make on a template will be immediately reflected on your browser. It’s pretty much like having React’s hot module reloading at your disposal!
Get the boilerplate to start your next Django project with Tailwind here. (django-browser-reload included!)
Top comments (0)