Django顺风自定义任意颜色不起作用

Question

I've been using django with django-tailwind to build a website that involves color mixing. I take a bunch of colors from a database and mix them together. This results in new colors that I can't write down in the tailwind config and so I've been trying to use the arbitrary values custom colors from the documentation. The css for the color shows up correctly in my inspector but the color itself doesn't compile.

I've also noticed that if I manually enter the color hex anywhere in the code (on another element for example), all elements with that specific color code get rendered correctly so I'm guessing it's something to do with django-tailwind not compiling the colors since they are determined during runtime or something.

My django template code is as follows:

{% for day_obj in days %}
    <div class="flex flex-col bg-[{{day_obj.day.color}}]">

and here it is from the chrome inspector

But it doesn't work. However, this

{% for day_obj in days %}
    <div class="flex flex-col bg-[{{day_obj.day.color}}]">
      <div class="flex items-center justify-between leading-tight">
        <h2 class="text-3xl font-bold">{{ day_obj.weekday }}</h2>
        <p>{{ day_obj.day.date }}</p>
      </div>
      <div class="grid grid-cols-{{ day_obj.habits|length }}">
        {% for habit in day_obj.habits %}
        <div class="bg-[{{habit|hex_color}}] text-white">&nbsp;</div>
        {% endfor %}
      </div>
      <div class="flex flex-col bg-[#82e153]">

will render all the elements correctly that have that specific color code: #82e153. Elements that are rendered from before also tend to stick around after I remove the manually-entered-hex-code but usually just stop rendering after a while (I assume due to some sort of caching of the color in the stylesheet)

Is there a way to make this work or should I just resort to using something else like the CDN? I really want to stick to django-tailwind for the time being.

Answer 1

I think you could use CSS variables for this. See tailwind docs. You could add a color to the tailwind config like:

module.exports = {
  theme: {
    extend:
      colors: {
        mixed: 'rgb(var(--color-mixed) / <alpha-value>)',
    }, 
  }
}

Now you can use the bg-mixed class in your html.

Setting the CSS var you can do with a style attribute: style="--color-mixed: 130 225 83" (these need to be RGB values separated by a space). I do not know much about Django, but I think replacing the value by {{day_obj.day.color}} will work, because the browser will add the value to the CSS var, which will be used by the compiled Tailwind class.

<div class="flex flex-col bg-mixed" style="--color-mixed: {{day_obj.day.color}}">

You may need to add the initial value of the var to the :root in the base layer in your index.css , like:

@layer base {
  :root {
    --color-mixed: 255 255 255; /* White */
  }
}

Hope this helps.