How to use TailwindCSS with Django? How to use TailwindCSS with Django? django django

How to use TailwindCSS with Django?


python css django tailwind-css

TL;DR

  1. Install TailwindCSS within your Django project, like any JS project with npm
  2. Use a live-reload server package with Django
  3. Add purgeCSS config before deploying

More detailed explanation

1 - The TailwindCSS build process

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 jstoolchainnpm install tailwindcss postcss-cli autoprefixernpx tailwind inittouch 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>

2 - 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.For this, I installed django-livereload-server.

Just follow setup instructions, this will work as expected out of the box, without any special configuration.

3 - The purgeCSS process

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

Ideas to improve the workflow

  • The build script could be run automatically when the input tailwind files (css, js) are edited
  • (Only if you don't use just-in-time compiler) PurgeCSS could be run automatically when required, rather than adding it or removing it manually.

python css django tailwind-css

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 followingstring:

TAILWIND_APP_NAME = 'theme'

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

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 befound under yourtailwindappname/templates/base.html. You can alwaysextend it or delete it if you have own layout.

  2. If you're not using base.html template provided with DjangoTailwind, 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

python css django tailwind-css

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/

Recent Posts
How can I color dots in a xy scatterplot according to column value?
How to update a claim in ASP.NET Identity?
What does {0} mean when initializing an object?
Accessing members of items in a JSONArray with Java
How to log SQL statements in Spring Boot?
Powershell Get-WebSite name parameter is ignored
How to detect scroll to bottom of html element
Java synchronized method
How to test controllers with CodeIgniter?
Detect Visual Composer
Matplotlib: Specify format of floats for tick labels
Rails join a list of strings with commas and "and" before the last