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 %} 

Answer: 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.