How do I extend tailwindcss?

[yangmo0113-alt]

i have few questions want to know
1.first , I have followed all the steps on the official website.
[https://tailwindcss.com/docs/installation/using-vite]

But I use Django in vs code to write,However, when executing runserver, the tailwindcss template is still not applied.

But so the enhancements I made in tailwind.config.js are applied. I think my output.css does not have these kits?

Finally, I'd like to try installing https://github.com/tailwindlabs/tailwindcss, but I don't know how to proceed.

I hope to get the answer. Thank you.

[marcusvramos]

Hi! The issue is that Tailwind with Vite is designed for JavaScript/TypeScript frontends, but you're using Django (Python backend).

For Django + Tailwind, you need a different setup:

Option 1: Use Tailwind CLI (Recommended for Django)

1. Install Tailwind standalone:

npm install -D tailwindcss
npx tailwindcss init

2. Configure tailwind.config.js to scan Django templates:

  module.exports = {
    content: [
      './templates/**/*.html',
      './your_app/**/*.html',
    ],
    theme: {
      extend: {},
    },
  }

3. Build CSS:

npx tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch

Option 2: Use django-tailwind package

pip install django-tailwind

Then follow: https://django-tailwind.readthedocs.io/

The Vite guide won't work with Django because Django serves templates differently than Vite's dev server.

Hope this helps!

[wongjn]

Slight correction for future readers. Option 1 seems to be Tailwind v3 integration instructions, so the first command must have the v3 qualifier:

npm install -D tailwindcss@3

For using Tailwind v4 (the latest version), follow the official CLI integration instructions.

[marcusvramos]

Thanks for the correction! You're right, for Tailwind v4, the official CLI instructions are the way to go.