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

Question

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:

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

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
        },
    },
});

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,
    }
}

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>

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! 🚀

Wongjn · Accepted Answer · 2025-02-06 16:00:17Z

4

As you surmised, when using the Vite plugin, Tailwind will only scan files in Vite's module graph for class names to generate. Your Django templates wouldn't be in this module graph since they are not handled by Vite.

To work around this, you can use the @source directive to explicitly point to more files that Tailwind should scan:

/* webapp/src/index.css */
@import "tailwindcss";

@source "../../templates";

edited Feb 6 at 16:00

answered Feb 6 at 8:20

Wongjn

27.1k5 gold badges24 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Haaland Feb 6 at 14:37

Thank you so much, it works perfectly :)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related