Не работают пользовательские произвольные цвета в Django tailwind

Я использую django с django-tailwind для создания сайта, который связан со смешиванием цветов. Я беру кучу цветов из базы данных и смешиваю их вместе. В результате получаются новые цвета, которые я не могу записать в конфигурации tailwind, поэтому я пытаюсь использовать произвольные значения пользовательских цветов из документации. Css для цвета отображается правильно в моем инспекторе, но сам цвет не компилируется.

Я также заметил, что если я вручную ввожу шестнадцатеричный цвет в любом месте кода (например, на другом элементе), все элементы с этим конкретным цветовым кодом отображаются правильно, поэтому я предполагаю, что это связано с тем, что django-tailwind не компилирует цвета, поскольку они определяются во время выполнения или что-то в этом роде.

Мой код шаблона django выглядит следующим образом:

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

и вот это из инспектора хрома enter image description here

Но это не работает. Однако, это

enter image description here

будет правильно отображать все элементы, которые имеют этот конкретный цветовой код: #82e153. Элементы, которые отображались раньше, также имеют тенденцию оставаться после удаления вручную введенного hex-кода, но обычно просто перестают отображаться через некоторое время (я предполагаю, что из-за некоторого кэширования цвета в таблице стилей)

Есть ли способ заставить это работать или я должен просто прибегнуть к использованию чего-то другого, например CDN? Я действительно хочу придерживаться django-tailwind на данный момент.

Я думаю, что для этого можно использовать переменные CSS. См. tailwind docs. Можно добавить цвет в конфигурацию tailwind, например:

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

Теперь вы можете использовать класс bg-mixed в вашем html.

Установить CSS var можно с помощью атрибута style: style = { "--color-mixed": 130 225 83 } (это должны быть значения RGB, разделенные пробелом). Я не очень хорошо разбираюсь в Django, но думаю, что замена значения на {{day_obj.day.color}} будет работать, потому что браузер добавит значение в CSS var, которое будет использоваться скомпилированным классом Tailwind 

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

Надеюсь, это поможет.

Вернуться на верх