Menu
How to use all features of TailwindCSS in a Django project (not only the CDN), including a clean workflow with auto-reloading and CSS minify step to be production-ready?
421
Use either Materialize CSS or Bulma for your Django project to make it look nice without much hassle. You don't have to be a designer, nor do you have to spend a lot of time on it.
Bootstrap's utility and layout classes provide you with everything you need to style a responsive webpage. With Tailwind, however, you are much more involved in styling the webpage because you end up having to create your own components using the utility classes that the framework offers.
Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it's not a UI kit. It doesn't have a default theme, and there are no build-in UI components. It comes with a menu of predesigned widgets to build your site with, but doesn't impose design decisions that are difficult to undo.
Create a new directory within your Django project, in which you'll install tailwindCSS like in any vanilla JS project setup: Now, add a script in your jstoolchain/package.json file to create the build process and specify the output file, such as: This should run without error, and tailwind-output.css should be now filled with thousands of lines.
django-tailwind can help us quickly import Tailwind CSS to Django without touching frontend config files. People who have no experience with frontend can still use it. The Node.js project created by django-tailwind does not have solution or any words about JS, so user who need to write JS will find a little hard to make it work together.
Many examples online show how to add Tailwind inside a full-fledged front-end stack, often with a complex build system setup to handle things such as ES6, Typescript, Vue or React, Sass/Less, etc. But you don't need a complex build system to leverage the full power of Tailwind.
Unfortunately PurgeCSS only process static CSS scan to figure out which CSS should be remained. I do not like the build process. So Vimesh style is here, it is a compact JIT TailwindCSS 2.0 lib. It dynamically monitor the DOM tree in your page, once it find any TailwindCSS classes, it will inject its definition.
Updated in July 2022: PostCSS is no longer necessary - there is a standalone CLI - django-browser-reload is the best extension - Django-tailwind plugin is an acceptable solution too.
There are (at least) 3 different methods to install Tailwind with Django properly.
This is the preferred method if you need node in your project (e.g : add plugins like Daisy UI, or have a SPA)
cd your-django-folder; mkdir jstoolchain; cd jstoolchain
npm init -y
npm install -D tailwindcss
npx tailwindcss init
tailwind.config.js that have just been created, by specifying the right place to parse your content. This could be something like below or a little different, depending on where your templates are located:...
content: ["../templates/**/*.{html,js}"],
...
your-django-folder, create an input.css file and add at least this in it:@tailwind base;
@tailwind components;
@tailwind utilities;
package.json file, you can prepare npm scripts to ease execution of build / minify tasks (adapt the paths according to your Django static folder location):"scripts": {
// use in local environment
"tailwind-watch": "tailwindcss -i ../input.css -o ../static/css/output.css --watch",
// use in remote environment
"tailwind-build": "tailwindcss -i ../input.css -o ../static/css/output.css --minify"
}
In your jstoolchains folder, keep running npm run tailwind-watch while you're coding. This will ensure that your output.css file is regenerated as soon as you add a new tailwind class to your code. Add this file to .gitignore.
If tailwind-watch is running without error, output.css file should now be filled with CSS. Now you can actually use tailwindCSS classes, by including the outputted css file into a Django template file along with Django's call to load the static files:
{% load static %}
<head>
<link rel="stylesheet" href="{% static "css/output.css" %}">
</head>
npm run tailwind-build script in your deployment process. This will build the output and remove unused classes to ensure a lower file size.What's missing now to ease development, is to auto-reload the django development server when an HTML file is changed and saved. The best extension to deal with this is Django-browser-reload. Just follow setup instructions, this will work as expected out of the box
This is the preferred method if your project does not require node at all (eg: you don't have SPA for your front, you don't need plugins like daisyUI, etc.).
You can install it manually following the official instructions, or automate it using a script shell like this:
#!/bin/sh
set -e
TAILWIND_ARCHITECTURE=arm64 # chose the right architecture for you
TAILWIND_VERSION=v3.1.4 # chose the right version
SOURCE_NAME=tailwindcss-linux-${TAILWIND_ARCHITECTURE}
OUTPUT_NAME=tailwindcss
DOWNLOAD_URL=https://github.com/tailwindlabs/tailwindcss/releases/download/${TAILWIND_VERSION}/${SOURCE_NAME}
curl -sLO ${DOWNLOAD_URL} && chmod +x ${SOURCE_NAME}
mv ${SOURCE_NAME} ${OUTPUT_NAME} # rename it
mv ${OUTPUT_NAME} /usr/bin # move it to be used globally in a folder already in the PATH var
For Tailwind configuration itself, please refer to the 1st method where it's explained in detail.
This plugin produces more or less the same results than you get manually with the npm method. The plugin is well documented, up to date, and people seem to be satisfied with it. As a personal preference, I think abstractions like this creates a little too magic and I prefer building the toolchain by myself to know what's happening behind the scene. But feel free to experiment this method as well and pick it if it suits you!
174
Django-Tailwind CSS is a very good package and it works well for me. Follow the docs properly and you will be fine.
Before you begin, make sure you have npm properly installed on your system
pip install django-tailwind
Alternatively, you can download or clone this repo and run pip install -e ..
Add tailwind to INSTALLED_APPS in settings.py
Create a tailwind-compatible Django-app, I like to call it theme:
python manage.py tailwind init theme
Add your newly created theme app to INSTALLED_APPS in settings.py
In settings.py, register tailwind app by adding the following string:
TAILWIND_APP_NAME = 'theme'
python manage.py tailwind install
python manage.py tailwind start
Django Tailwind comes with a simple base.html template that can be found under yourtailwindappname/templates/base.html. You can always extend it or delete it if you have own layout.
If you're not using base.html template provided with Django Tailwind, add styles.min.css to your own base.html template file:
You should now be able to use Tailwind CSS classes in your html.
To build a production version of CSS run:
python manage.py tailwind build
For the live reload, this handles it:
python manage.py tailwind start
For the build process, this handles it:
python manage.py tailwind build
For the PurgeCSS process, see simple sample in the docs
For NPM path configuration error (esp. on windows), see docs
21
A bit late, but I'v recently wrote a blog post about this, focused on replacing the Gulp and Bootstrap in Django Cookiecutter with Webpack and TailwindCSS. This is the link: https://www.boringbackend.dev/using-tailwindcss-cookiecutter-django/
41
1. Go to your desired folder for installation. In my case:
mkdir static/css/tailwind
cd static/css/tailwind
2. Create package.json:
npm init -y
3. Install Tailwind via npm:
npm i tailwindcss
4. Create a css file and add code from official Tailwind documentation:
@tailwind base;
@tailwind components;
@tailwind utilities;
5. Open package.json and make this change to "scripts":
"scripts": {
"build:css": "tailwind build tw.css -o ../tailwind.css"
},
6. Run the written script
npm run build:css
tw.css is the location of the file we created in 4th step. And ../tailwind.css is the location of the file we want the Tailwind css to be outputted. So, after running this command we will have a tailwind.css file with Tailwind base, components and utilities.
22
inplace html styling.main.scss file to add your custom styles.Clone the project
https://github.com/MindMansion/DjangoTailwindStarter
From your Django project directory
mkdir theme
cd theme
npx degit https://github.com/MindMansion/DjangoTailwindStarter/theme
npm install
npm run build
npm run watch
A global.css file should be ready for use in your static directory.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
