我一直在用django和django-tailwind來建立一個涉及到顏色混合的網站。我從數據庫里取出一些顏色，然后把它們混合在一起。這導致了新的顏色，我不能在順風配置中寫下來，所以我一直在嘗試使用文檔中的任意值自定義顏色。顏色的css在我的檢查器中顯示正確，但是顏色本身無法編譯。

我還注意到，如果我在代碼中的任何地方手動輸入顏色十六進制(例如，在另一個元素上)，具有該特定顏色代碼的所有元素都會正確呈現，所以我猜測這與django-tailwind沒有編譯顏色有關，因為它們是在運行時確定的。

我的django模板代碼如下:

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

這是來自chrome瀏覽器的

但是不管用。 然而，這

{% 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]">

將正確地呈現具有該特定顏色代碼的所有元素:# 82e153。之前呈現的元素在我刪除手動輸入的十六進制代碼后也會保留下來，但通常過一會兒就會停止呈現(我假設是由于樣式表中某種顏色的緩存)

有沒有一種方法可以讓這個工作，或者我應該只是求助于使用其他東西，如CDN？我暫時很想堅持django-tailwind。

我認為你可以在這方面使用CSS變量。參見順風文檔。你可以給順風配置添加一種顏色，如下所示:

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

現在你可以在html中使用bg-mixed類了。

設置CSS變量可以用樣式屬性來完成: style = & quot-混色:130 225 83 & quot(這些必須是由空格分隔的RGB值)。我不太了解Django，但我認為用{{day_obj.day.color}}替換該值是可行的，因為瀏覽器會將該值添加到CSS var中，供編譯后的Tailwind類使用。

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

您可能需要將var的初始值添加到index.css中基礎層的:root中，如下所示:

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

希望這有所幫助。

你現在可能已經明白了，但是對于其他可能遇到這個問題的人來說...

問題是由{{ day_obj.day.color }}引起的，順風處理器需要有一個靜態值才能工作。

通常對于任意值，情況是這樣的。

<!-- in your django tempalte -->
<div class="bg=[#ffaabb]">
...
</div>

// in the generated css

.bg-\[\#ffaabb\] {
   --tw-bg-opacity: 1;
   background-color: rgb(255 170 187 / var(--tw-bg-opacity));
}

如果您使用{{..}}對于任意值，它會創建一個類似上面的類名，這就是為什么你的css沒有反映顏色。

這是一個到順風文件的鏈接，是舊版本。但是我相信v3還是一樣的。

https://v2.tailwindcss.com/docs/just-in-time-mode

不能從動態值計算任意值

& ltdiv class = & quotBG-[{ { userThemeColor } }]& quot；& gt& lt/div & gt；

對真正動態的或用戶定義的值使用內聯樣式

& ltdiv style = & quot背景色:{ { userThemeColor } } & quot& gt& lt/div & gt；