[Django]-How to use TailwindCSS with Django?

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

2. Add tailwind to INSTALLED_APPS in settings.py

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

python manage.py tailwind init theme

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

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

TAILWIND_APP_NAME = 'theme'

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

python manage.py tailwind install

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

python manage.py tailwind start

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

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

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.

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.

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

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