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

3yhwsihp 于 2023-06-07 发布在 Go

关注(0)|答案(2)|浏览(135)

我一直在使用django和django-tailwind来构建一个涉及颜色混合的网站。我从数据库中提取一堆颜色并将它们混合在一起。这导致新的颜色，我不能写下来的顺风配置，所以我一直试图使用任意值自定义颜色的文档。颜色的css在我的inspector中显示正确，但颜色本身无法编译。
我还注意到，如果我在代码中的任何地方手动输入十六进制颜色（例如在另一个元素上），所有具有特定颜色代码的元素都会正确呈现，所以我猜这与django-tailwind没有编译颜色有关，因为它们是在运行时确定的。
我的Django模板代码如下：

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

这是Chrome Inspector x1c 0d1x
但它不起作用。然而，这

{% 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。

django

来源：https://stackoverflow.com/questions/72941203/django-tailwind-custom-arbitrary-colors-not-working

2条答案

按热度按时间

gpfsuwkq1#

我认为你可以使用CSS变量来实现这一点。参见顺风文档。您可以向顺风配置添加颜色，如：

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

现在你可以在html中使用bg-mixed类了。
设置CSS var可以使用style属性：style="--color-mixed: 130 225 83"（这些值需要用空格分隔）。我对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 */
  }
}

希望这能帮上忙。

赞(0）回复(0）举报 2023-06-07

bqf10yzr2#

你现在可能已经明白了，但对于其他可能遇到这个问题的人...*

这个问题是由{{ day_obj.day.color }}引起的，顺风处理器需要有一个static值才能工作。
通常对于任意值，发生的情况是这样的。

<!-- 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));
}

如果你使用{{ .. }}作为arbitrary值，它会创建一个像上面一样的类名，这就是为什么你的css没有反射颜色。
这是一个链接到顺风文档，它的旧版本。但我相信V3还是一样的。
https://v2.tailwindcss.com/docs/just-in-time-mode
不能从动态值计算任意值
<div class="bg-[{{ userThemeColor }}]"></div>
对真正的动态值或用户定义值使用内联样式
<div style="background-color: {{ userThemeColor }}"></div>

赞(0）回复(0）举报 2023-06-07

我来回答

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

2条答案

相关问题

热门标签

最新问答