How to use all features of TailwindCSS in a Django project (not only the CDN), including a clean workflow with auto-reloading, and purgeCSS step to be production-ready?
When googling, I found a python package named django-tailwind but it did not really helped me in the process.
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/
Create a new directory within your Django project, in which you'll install tailwindCSS like in any vanilla JS project setup:
cd your-django-folder; mkdir jstoolchain; cd jstoolchain
npm install tailwindcss postcss-cli autoprefixer
npx tailwind init
touch postcss.config.js
In this postcss.config.js file, add:
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
mkdir css; touch css/tailwind.css
In this tailwind.css file, add at least this:
@tailwind base;
@tailwind components;
@tailwind utilities;
Now, add a script in your jstoolchain/package.json file to create the build process and specify the output file, such as:
{
"scripts": {
"build": "postcss css/tailwind.css -o ../your-django-folder/your-path-to-static/css/tailwind-output.css"
}
}
Now, run;
npm run-script build
This should run without error, and tailwind-output.css should be now filled with thousands of lines. 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/tailwind-output.css" %}">
</head>
What's missing now to ease development, is to auto-reload the django development server when an HTML file is changed and saved. For this, I installed django-livereload-server.
Just follow setup instructions, this will work as expected out of the box, without any special configuration.
When you're ready to deploy, to ensure the CSS output file is not bloated with useless classes, go to jstoolchain/tailwind.config.js file, and add:
purge: {
enabled: true,
content: ['../your-django-folder/path-to-your-templates/**/*.html'],
},
Now, running build script should produce a much smaller CSS output, production-ready file.
EDIT: Tailwind 2.1 comes with an optional Just-In-Time compiler. The purge section will still be required, but you won't need to run a purge script before deploying, among many other advantages.
Take a look here for more informations
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.
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
Found this awesome repository on github => https://github.com/timonweb/django-tailwind
Can be initialized simply with python manage.py tailwind start
Features:
Install the django-tailwind package via pip:
python -m pip install django-tailwind
Alternatively, you can install the latest development version via:
python -m pip install git+https://github.com/timonweb/django-tailwind.git
Add 'tailwind' to INSTALLED_APPS in settings.py:
INSTALLED_APPS = [ 'tailwind', ]
Create a Tailwind CSS compatible Django app, I like to call it theme:
python manage.py tailwind init
Add your newly created 'theme' app to INSTALLED_APPS in settings.py:
INSTALLED_APPS = [ 'tailwind', 'theme' ]
Register the generated 'theme' app by adding the following line to settings.py file:
TAILWIND_APP_NAME = 'theme'
Make sure that the INTERNAL_IPS list is present in the settings.py file and contains the 127.0.0.1 ip address:
INTERNAL_IPS = [ "127.0.0.1", ]
Install Tailwind CSS dependencies, by running the following command:
python manage.py tailwind install
The Django Tailwind comes with a simple base.html template located at your_tailwind_app_name/templates/base.html. You can always extend or delete it if you already have a layout.
If you are not using the base.html template that comes with Django Tailwind, add {% tailwind_css %} to the base.html template:
{% load tailwind_tags %}
<head>
{% tailwind_css %}
</head>
The {% tailwind_css %} tag includes Tailwind’s stylesheet.
Let’s also add and configure django_browser_reload, which takes care of automatic page and css refreshes in the development mode. Add it to INSTALLED_APPS in settings.py:
INSTALLED_APPS = [ 'tailwind', 'theme', 'django_browser_reload' ]
Staying in settings.py, add the middleware:
MIDDLEWARE = [ "django_browser_reload.middleware.BrowserReloadMiddleware", ]
The middleware should be listed after any that encode the response, such as Django’s GZipMiddleware. The middleware automatically inserts the required script tag on HTML responses before when DEBUG is True.
Include django_browser_reload URL in your root url.py:
from django.urls import include, path
urlpatterns = [ path("__reload__/", include("django_browser_reload.urls")), ]
Finally, you should be able to use Tailwind CSS classes in HTML. Start the development server by running the following command in your terminal:
python manage.py tailwind start
Vimesh style is a full-featured tiny javascript library alternative to Tailwind CSS 2.0. Just add one line to your html page, it will take care the rest. https://github.com/vimeshjs/vimesh-style
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.