Tailwind CSS генерирует CSS не для всех классов

Я новичок в Tailwind CSS и хочу включить его в свой проект Django/FastAPI.

Я использую Tailwind версии 4.0.17.

Проблема в том, что Tailwind не распознает HTML-теги, которые я использую в файлах шаблонов...

Я выполняю следующую команду :

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

Это генерирует CSS-файл, но в нем нет всех классов... С другой стороны, когда я тестирую с помощью этой команды :

npx tailwindcss --content ./templates/test_endpoint.html --dry-run > output.css

На этот раз в выходном файле присутствуют все классы CSS шаблона HTML, но не другие (классы других шаблонов HTML).

Вот код для tailwind.config.js файла:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
      "./templates/**/*.html",
      "./templates/*.html",
      "templates/main/index.html",
      "templates/base.html",
      "./**/templates/**/*.html",
      "./static/**/*.css",
      "./fastapi_app/**/*.html",
      "./main/**/*.html"
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }

Я несколько раз пытался переустановить Tailwind, менял пути, пробовал другие команды, но результат всегда один и тот же.

Если у вас есть идеи, как решить эту проблему, это было бы здорово!

Спасибо

С января 2025 года выпущен Tailwind CSS версии 4. В своем вопросе вы упомянули, что используете последнюю версию версии 4. Однако некоторые моменты в вашем вопросе по-прежнему отражают практику версии 3.

Попутный ветер CSS v3

Если вы хотите использовать версию 3, вам необходимо выполнить установку в зависимости от версии, а не устанавливать tailwindcss с помощью npm install:

npm install tailwindcss@3

Попутный ветер v4

Если вы хотите работать с версией 4, стоит ознакомиться с некоторыми важными изменениями:

Вот несколько ключевых из них, основанных на вашем вопросе:

Файл tailwind.config.js был удален в пользу подхода к настройке на основе CSS.

Параметр content был удален; начиная с версии 4, вам больше не нужно указывать пути к отсканированным файлам. Вместо этого автоматический детектор источников делает это за вас.

Директивы @tailwind были удалены; теперь вам нужно выполнить простой импорт в ваш основной CSS-файл.

@import "tailwindcss";

Пакеты CLI и PostCSS были разделены; они больше не являются частью пакета tailwindcss. Вместо этого они доступны как @tailwindcss/cli и @tailwindcss/postcss.

Исходя из вашего вопроса, вам нужен пакет @tailwindcss/cli. Команда также изменилась с npx tailwindcss, как показано здесь:

npx @tailwindcss/cli -i ./src/css/input.css -o ./src/css/output.css

Объявление уникального источника вместо автоматического определения источника:

./ src/css/input.css

@import "tailwindcss" source("./../templates/test_endpoint.html");

или

./ src/css/input.css

@import "tailwindcss" source(none); /* none = disable autoamtic source detection */

@source "./../templates/test_endpoint.html"; /* add ./templates/test_endpoint.html path to sources */

Похожий ответ для объявления уникального исходного кода из TailwindCSS v4 CLI:

Tailwind включает только классы, найденные в файлах, перечисленных в разделе содержимое в tailwind.config.js. Убедитесь, что пути указаны правильно и соответствуют тому, где вы запускаете команду. Используйте эту упрощенную конфигурацию:

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

Затем выполните:

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

Избегайте использования динамических имен классов, таких как class="text-{{ color }}", так как попутный ветер их не обнаружит.

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