Django - TailwindCSS не загружает некоторые атрибуты

У меня возникают проблемы при использовании некоторых атрибутов в Django и TailwindCSS. Возьмем для примера эту таблицу:

                    <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
                        <table class="w-full text-lg text-left text-gray-500 rounded-2xl mt-4 dark:text-gray-400">
                            <thead class="rounded-2xl text-lg text-white uppercase bg-[#68BA9E] dark:bg-gray-700 dark:text-gray-400">
                            <tr>
                                <th scope="col" class="px-6 py-3">
                                    Report title
                                </th>
                                <th scope="col" class="px-6 py-3">
                                    Company
                                </th>
                                <th scope="col" class="px-6 py-3">
                                    Brand (if any)
                                </th>
                                <th scope="col" class="px-6 py-3">
                                    Go to report
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for report in reports %}
                                <tr class="bg-white border-b text-center dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                    <th scope="row"
                                        class="h-19 px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                                        {{ report.title }}
                                    </th>
                                    <td class="px-6 py-4">
                                        {{ report.company }}
                                    </td>
                                    <td class="px-6 py-4">
                                        {% if report.brand %}
                                            {{ report.brand }}
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                    <td class="px-6 py-4">
                                        <a href="{% url 'tool:single-report' slug=report.slug %}">Access</a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>

Дает следующее: Text

Но когда я пытаюсь изменить bg-color от:

<thead class="rounded-2xl text-lg text-white uppercase bg-[#68BA9E] dark:bg-gray-700 dark:text-gray-400">

To:

 <thead class="rounded-2xl text-lg text-white uppercase bg-red-700 dark:bg-gray-700 dark:text-gray-400">

Новый цвет не загружается. Это дает: Text

Я не понимаю, почему я ничего не получаю. В моей конфигурации запущены следующие задачи:

  • Сервер работает с python manage.py runserver
  • TailwindCSS запущен с python manage.py tailwind start
  • Livereload работает с python manage.py livereload

Я также очищаю свой кэш с помощью CMD+Shift+R.

У меня также проблемы с некоторыми полями и отступами, которые не применяются. Я даже купил плагин Devtools для TailwindCSS. Когда я редактирую атрибут с помощью инспектора Chrome и этого плагина, он работает. Но когда он находится в моем коде, новый цвет не загружается. Случалось ли такое с вами?

Обновление: Вот полный код:

У меня все работает нормально. Вы можете посмотреть код здесь здесь .

Если класс bg работает для любого пользовательского цвета, то он должен работать и с red-700. В противном случае вы можете проверить, нет ли опечатки.

Вы также можете добавить !, например, вот это !bg-red-700, чтобы сделать этот класс важным.

Последняя попытка перезапустить сервер,

Наконец-то нам удалось решить эту проблему. Проблема заключалась в том, что я запустил python manage.py collectstatic, который создал следующий каталог: static > css > dist > styles.css. django-tailwind создал тот же репозиторий в папке theme. Каждый раз, когда я пытался перезапустить сервер, учитывалась неправильная styles.css. Поэтому, изменив имя первой папки, я добился того, что загрузился правильный файл CSS.

Я решил свою проблему, изменив каталог templates в файле settings.py с каталога шаблонов, который я использовал до добавления tailwind, на каталог theme/templates, который был создан при настройке tailwind.

в файле settings.py из этого:

TEMPLATES = [
    {   ...,
        'DIRS': ['templates'],
        ..., 
    }
],

на это:

TEMPLATES = [
    {   ...,
        'DIRS': ['theme/templates'],
        ...,
    }
]
Вернуться на верх