CODEWITHSUNDEEP
pythoncssdjangotailwind-css
David Dahan
David Dahan

Reputation: 11162

How to use TailwindCSS with Django?

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?

Upvotes: 43

Views: 50224

Answers (6)

David Dahan
David Dahan

Reputation: 11162

There are (at least) 3 different methods to install Tailwind with Django properly.

1st method: NPM

This is the preferred method if you need node in your project (e.g : add plugins like Daisy UI, or have a SPA)

Installing tailwindCSS and build/minify processes

  • 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 init -y
npm install -D tailwindcss
npx tailwindcss init
  • Configure your template paths in 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}"],
...
  • In your-django-folder, create an input.css file and add at least this in it:
@tailwind base;
@tailwind components;
@tailwind utilities;
  • In your 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>
  • Don't forget to include the npm run tailwind-build script in your deployment process. This will build the output and remove unused classes to ensure a lower file size.

Handling auto-reload locally

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

2nd method: standalone CLI

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.

3rd method: django-tailwind plugin

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!

Upvotes: 106

hmfzer
hmfzer

Reputation: 11

I know that you mentioned to exclude the CDN, but I clicked on this page to find ways to use tailwind in my django project, without knowing there's a CDN for that (spend a few hours debugging this too.)

So for those of you who found this question searching for that, please check out https://tailwindcss.com/docs/installation/play-cdn

Upvotes: 0

ilyasbbu
ilyasbbu

Reputation: 1749

Found this awesome repository on github => https://github.com/timonweb/django-tailwind Can be initialized simply with python manage.py tailwind start

Features:

  • supports hot reloading
  • supports latest tailwind version

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

Upvotes: 0

kelvin
kelvin

Reputation: 31

Tailwind + Django starter

- Fully supports tailwind inplace html styling.
- And a main.scss file to add your custom styles.

Clone the project

https://github.com/MindMansion/DjangoTailwindStarter

OR

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.

Upvotes: 2

John Johnson
John Johnson

Reputation: 643

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

Quick start

  1. Install the python package django-tailwind from pip

pip install django-tailwind

Alternatively, you can download or clone this repo and run pip install -e ..

  1. Add tailwind to INSTALLED_APPS in settings.py

  2. Create a tailwind-compatible Django-app, I like to call it theme:

python manage.py tailwind init theme

  1. Add your newly created theme app to INSTALLED_APPS in settings.py

  2. In settings.py, register tailwind app by adding the following string:

TAILWIND_APP_NAME = 'theme'

  1. Run a command to install all necessary dependencies for tailwind css:

python manage.py tailwind install

  1. Now, go and start tailwind in dev mode:

python manage.py tailwind start

  1. 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.

  2. 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

Upvotes: 22

Ulvi
Ulvi

Reputation: 1021

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.

Upvotes: 4

Related Questions