Django - TailwindCSS无法加载某些属性

bvjxkvbb  于 2022-12-05  发布在  Go
关注(0)|答案(2)|浏览(139)

在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>

给出以下内容:

但当我尝试将bg-color从:

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

收件人:

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

新颜色无法加载。它给出:

我不明白为什么什么都没有。在我的配置中,以下任务正在运行:

  • 服务器正在以python manage.py runserver运行
  • TailwindCSS以python manage.py tailwind start运行
  • 重载运行python manage.py livereload

我还使用CMD+Shift+R清除缓存。
我也遇到了一些无法应用的边距和填充的问题。我甚至买了plugin Devtools for TailwindCSS。当我用Chrome检查器和这个插件编辑属性时,它是工作的。但是当它在我的代码中时,新的颜色不能加载。这种情况发生在你身上吗?

**更新:**以下是完整的代码:

{% extends 'base.html' %}
{% block content %}

    <div class="flex-1 pt-8 pb-5 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <div class="w-100 mb-10">
            <div>
                {% if nb_reports == 0 %}

                    <div class="text-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-gray-400" fill="none"
                             viewBox="0 0 24 24"
                             stroke="currentColor" stroke-width="2" aria-hidden="true">>
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                        <h3 class="mt-2 text-sm font-medium text-gray-900">No reports</h3>
                        <p class="mt-1 text-sm text-gray-500">Get started by creating a new report.</p>
                        <div class="mt-6">
                            <a href="{% url 'tool:create-report' %}"
                               class="inline-block items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-xl text-white bg-[#195266] hover:bg-[#23647a] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                New report
                            </a>
                        </div>
                    </div>

                {% else %}

                    <div>
                        <h2 class="text-xl leading-6 font-medium text-gray-900">Create report</h2>
                        <p class="mt-1 text-sm text-gray-500">Find all your created reports below.</p>
                    </div>



                    <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-red-700 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>
                    {% endif %}
                    </div>
                </div>
        </div>
    </div>
    

{% endblock %}
rekjcdws

rekjcdws1#

它对我来说工作得很好。你可以在这里看到代码here
如果bg类适用于任何自定义颜色,那么它也应该适用于red-700
您还可以添加!(类似于!bg-red-700)以使该类变得重要。
最后尝试重新启动服务器,

polhcujo

polhcujo2#

我们最终设法解决了这个问题。问题是我运行了python manage.py collectstatic,它创建了以下目录:static > css > dist > styles.css . django-tailwindtheme文件夹下创建了相同的存储库。每次我试图重新启动服务器时,都会考虑到错误的styles.css。因此,通过更改第一个文件夹的名称,它使我能够加载正确的CSS文件。

相关问题