Django – TailwindCSS won't load some attributes
Question:
I’m having issues when it comes to using some attributes with Django and TailwindCSS.
Let’s take this table for example:
<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>
Gives the following:
But when I try to change the bg-color from:
<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">
The new color won’t load. It gives:
I don’t understand why I’m getting nothing. In my configuration, following tasks are running:
- The server is running with
python manage.py runserver
- TailwindCSS is running with
python manage.py tailwind start
- Livereload is running with
python manage.py livereload
I also clear my cache with CMD+Shift+R.
I’m also having troubles with some margins and paddings that won’t apply. I even bought the plugin Devtools for TailwindCSS. When I edit an attribute with Chrome inspector and this plugin, it’s working. But when it’s in my code, the new color won’t load.
Has this ever happened to you?
Update:
Here is the complete code:
{% 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 %}
Answers:
It is working fine for me. YOu can see here for the code here .
If the bg class is working for any custom color, then it should also work with red-700. Else you can check if there’s any typo.
You can also add ! likr this !bg-red-700 to make this class important.
Lastly try to restart the server,
We finally managed to solve this issue.
The problem was that I ran python manage.py collectstatic which created the following directory : static > css > dist > styles.css. django-tailwind created the same repository under the theme folder. Every time I tried to restart the server, the wrong styles.css was taken into account. So by changing the name of the first folder, it enabled me to load the correct CSS file.
I solved mine by changing the templates directory in my settings.py file from the template folder I was using before adding tailwind to the theme/templates folder that was created when setting up tailwind.
in settings.py file from this:
TEMPLATES = [
{ ...,
'DIRS': ['templates'],
...,
}
],
to this:
TEMPLATES = [
{ ...,
'DIRS': ['theme/templates'],
...,
}
]
Also had problems with django-tailwind. For me it was a problem with the chrome browser, it simply stopped loading th css files. Leaving this for future developers.
I’m having issues when it comes to using some attributes with Django and TailwindCSS.
Let’s take this table for example:
<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>
Gives the following:
But when I try to change the bg-color from:
<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">
The new color won’t load. It gives:
I don’t understand why I’m getting nothing. In my configuration, following tasks are running:
- The server is running with
python manage.py runserver - TailwindCSS is running with
python manage.py tailwind start - Livereload is running with
python manage.py livereload
I also clear my cache with CMD+Shift+R.
I’m also having troubles with some margins and paddings that won’t apply. I even bought the plugin Devtools for TailwindCSS. When I edit an attribute with Chrome inspector and this plugin, it’s working. But when it’s in my code, the new color won’t load.
Has this ever happened to you?
Update:
Here is the complete code:
{% 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 %}
It is working fine for me. YOu can see here for the code here .
If the bg class is working for any custom color, then it should also work with red-700. Else you can check if there’s any typo.
You can also add ! likr this !bg-red-700 to make this class important.
Lastly try to restart the server,
We finally managed to solve this issue.
The problem was that I ran python manage.py collectstatic which created the following directory : static > css > dist > styles.css. django-tailwind created the same repository under the theme folder. Every time I tried to restart the server, the wrong styles.css was taken into account. So by changing the name of the first folder, it enabled me to load the correct CSS file.
I solved mine by changing the templates directory in my settings.py file from the template folder I was using before adding tailwind to the theme/templates folder that was created when setting up tailwind.
in settings.py file from this:
TEMPLATES = [
{ ...,
'DIRS': ['templates'],
...,
}
],
to this:
TEMPLATES = [
{ ...,
'DIRS': ['theme/templates'],
...,
}
]
Also had problems with django-tailwind. For me it was a problem with the chrome browser, it simply stopped loading th css files. Leaving this for future developers.