close

How to use TailwindCSS with Django?

Hello Guys, How are you all? Hope You all Are Fine. Today We Are Going To learn about How to use TailwindCSS with Django in Python. So Here I am Explain to you all the possible Methods here.

Without wasting your time, Let’s start This Article.

Table of Contents

How to use TailwindCSS with Django?

  1. How to use TailwindCSS with Django?

    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.

  2. use TailwindCSS with Django

    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.

Method 1

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)

Method 2

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.

Summery

It’s all About this issue. Hope all Methods helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which Method worked for you? Thank You.

Also, Read