Как заставить Tailwind v4 обнаруживать CSS-классы в шаблонах Django с помощью Vite?

Я интегрирую Tailwind CSS v4 с Django с помощью Vite, но столкнулся с проблемой, из-за которой Tailwind обнаруживает классы только из приложения Vite и не распознает новые классы, добавленные в шаблоны Django.

То, что я Делал До Сих Пор:

  1. Настроил Vite в моем проекте Django:
  • Установил Tailwind CSS версии 4 и голосую в веб-приложении / каталоге.
  • Запуск npm run dev обслуживает стили, а npm run build выводит данные в dist/.
  1. Настроенный объект (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. Сконфигурированные статические файлы Django (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. Обновлен мой шаблон Django (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. Настроенный файл style.css в webapp/src/:

@import "tailwindcss";

Проблема:

  • Tailwind обнаруживает только классы из моего приложения Vita (src/), но не обнаруживает новые классы, добавленные в шаблоны Django.
  • Если я использую класс, подобный text-red-500, в моем тесте голосования, это работает. Но если я попробую text-red-600 внутри шаблона Django, это не сработает.
  • Поскольку Tailwind v4 удален tailwind.config.js, я не знаю, как правильно указать пути к контенту для шаблонов Django.

В чем мне Нужна помощь:

Как мне правильно указать пути к шаблонам Django в Tailwind v4 (без tailwind.config.js )?

Это мой репозиторий, если вы хотите взглянуть Репозиторий на Github

Мы были бы очень признательны за любую помощь! 🚀

Как вы уже поняли, при использовании плагина Video Tailwind будет сканировать файлы в графе модулей Vite только в поисках имен классов для генерации. Ваших шаблонов Django не было бы в графе этого модуля, так как они не обрабатываются Vite.

Чтобы обойти это, вы можете использовать директиву @source, чтобы явно указать на другие файлы, которые Tailwind должен сканировать:

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

@source "../../templates";
Вернуться на верх