Почему в tailwind генерируются только некоторые классы css?

У меня есть проект, в котором я использую Django в качестве backend и tailwind для css. tailwind не выдает мне никаких ошибок и находит классы в моих файлах, но не генерирует css. Единственный класс, для которого он работает, это bg-blue-500 и больше ничего. если кто-нибудь может подумать, почему это может происходить или как это исправить, я был бы очень признателен.

html страница

{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>{% block title %}Auctions{% endblock %}</title>
        <link rel="stylesheet" href="{% static 'auctions/output.min.css' %}">
    </head>
    <body>
        <h1>Auctions</h1>
        <div>
            {% if user.is_authenticated %}
                Signed in as <strong>{{ user.username }}</strong>.
            {% else %}
                Not signed in.
            {% endif %}
        </div>
        <ul class="nav">
            <li class="nav-item  bg-red-500">
                <a class="nav-link" href="{% url 'activeListings' %}">Active Listings</a>
            </li>
            {% if user.is_authenticated %}
                <li class="nav-item bg-blue-500">
                    <a class="nav-link" href="{% url 'logout' %}">Log Out</a>
                </li>
            {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'login' %}">Log In</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'register' %}">Register</a>
                </li>
            {% endif %}
        </ul>
        <hr>
        {% block body %}
        {% endblock %}
    </body>
</html>

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    h1 {
        @apply text-4xl;
    }
    h2 {
        @apply text-3xl;
    }
    h3 {
        @apply text-2xl;
    }
    h4 {
        @apply text-xl;
    }

}

package.json

        {
          "name": "jstools",
          "version": "1.0.0",
          "description": "",
          "main": "tailwind.config.js",
          "scripts": {
            "build": "tailwind build -i ../auctions/tailwind.css -o ../auctions/output.css && cleancss -o ../auctions/output.min.css ../auctions/output.css"
          },
          "keywords": [],
          "author": "",
          "license": "ISC",
          "dependencies": {
            "autoprefixer": "^10.4.12",
            "clean-css-cli": "^5.6.1",
            "tailwindcss": "^3.1.8"
          }
        }

конфигурация хвостового ветра

/** @type {import('tailwindcss').Config} */
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
},
content: {
    enabled: false, //true for production build
    content: ['../../templates/auctions/*.html', '../../templates/**/*.html']
},
theme: {
    screens: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px'
    },
    
    extend: {},
},
variants: {},
plugins: [],
}

file structure

Поскольку в tailwindcss нет nav-item nav-link или nav, вы можете посмотреть в документации tailwindcss для доступных классов css, которые вы можете использовать.

Вы также можете зарегистрировать свой собственный компонент, добавив его в файл конфигурации tailwind или непосредственно в файл css

@layer components {
    .nav-item {
        @apply 'tailwind css classes'
    }
}
Вернуться на верх