How to Make Tailwind v4 Detect CSS Classes in Django Templates Using Vite?

I'm integrating Tailwind CSS v4 with Django using Vite, but I'm facing an issue where Tailwind only detects classes from the Vite app and does not recognize new classes added in Django templates.

What I’ve Done So Far:

  1. Set up Vite in my Django project:
  • Installed Tailwind CSS v4 and Vite in a webapp/ directory.
  • Running npm run dev serves styles, and npm run build outputs to dist/.
  1. Configured Vite (vite.config.js):
import { defineConfig } from 'vite';
import { resolve } from 'path';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        tailwindcss(),
    ],
    base: '/static/', // Important for Django to locate assets
    build: {
        manifest: true,
        emptyOutDir: true,
        outDir: resolve(__dirname, 'dist'), // Ensure the output folder is 'dist'
        rollupOptions: {
            input: {
                tailwind: resolve(__dirname, 'src/style.css'),
            },
        },
    },
    server: {
        watch: {
            usePolling: true, // Ensures Django templates are watched
            ignored: ['!../templates/**/*'], // Make sure templates are included
        },
    },
});
  1. Configured Django Static Files (settings.py):
STATIC_URL = 'static/'

STATIC_ROOT = BASE_DIR / 'staticfiles'
STATICFILES_DIRS = [
    BASE_DIR / "webapp/dist" # Matches vite config!
]
DJANGO_VITE = {
    "default": {
        "dev_mode": DEBUG,
    }
}
  1. Updated My Django Template (templates/home.html):
<!-- templates/home.html -->
{% load django_vite %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tailwind 🤝🏻 Django</title>
    {% vite_hmr_client %}
    <link rel="stylesheet" href="{% vite_asset_url 'src/style.css' %}" />
</head>
<body>
<h1 class="p-8 text-6xl inline-block font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-500  to-red-500">
    Tailwind and Django!
</h1>
<h1 class="text-red-700 text-3xl">geeg</h1>
</body>
</html>
  1. Configured style.css in webapp/src/:

@import "tailwindcss";

The Issue:

  • Tailwind only detects classes from my Vite app (src/), but does not detect new classes added in Django templates.
  • If I use a class like text-red-500 in my Vite test, it works. But if I try text-red-600 inside a Django template, it does not apply.
  • Since Tailwind v4 removed tailwind.config.js, I don’t know how to properly specify my content paths for Django templates.

What I Need Help With:

How do I correctly specify Django template paths in Tailwind v4 (without tailwind.config.js)?

This is my repo if you want to take a look Github repo

Any help would be greatly appreciated! 🚀

Вернуться на верх