在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 %}
2条答案
按热度按时间rekjcdws1#
它对我来说工作得很好。你可以在这里看到代码here。
如果
bg
类适用于任何自定义颜色,那么它也应该适用于red-700
。您还可以添加
!
(类似于!bg-red-700
)以使该类变得重要。最后尝试重新启动服务器,
polhcujo2#
我们最终设法解决了这个问题。问题是我运行了
python manage.py collectstatic
,它创建了以下目录:static > css > dist > styles.css
.django-tailwind
在theme
文件夹下创建了相同的存储库。每次我试图重新启动服务器时,都会考虑到错误的styles.css
。因此,通过更改第一个文件夹的名称,它使我能够加载正确的CSS文件。