Попутный ветер, один из произвольных цветов, не работает, если он записан как переменная

Попутный ветер заявляет, что следующее возможно, когда речь идет о произвольных цветах, которые мы не хотим загрязнять конфигурацию попутного ветра:

bg-[#e73d3dFF]

Теперь в коде, когда вы пишете такой цвет, он работает:

bg-[#e73d3dFF]

Вот часть, которая меня сбивает с толку, когда она написана с использованием любой формы компиляции (я покажу все примеры), она не работает. Строка правильно распечатывается в HTML, но цвет не отображается.

Пример 1

`bg-[${navItem.bg.hex}]`

Пример 2

const classStyle = `bg-[${navItem.bg.hex}]`;
classNames({[classStyle]: true}); 

Пример 3:

'bg-[' + {navItem.bg.hex} + ']'; 

Все приведенные выше примеры приводят к правильной печати HTML, поэтому мы видим:

<li class="bg-[#e73d3dFF]">

Но вот кикер, цвет не отображается, правила не применяются, как будто правило цвета не было создано Tailwind.

Есть идеи?

[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]
[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]
Я научился создавать карусель в ReactJS с помощью библиотеки Splide.
Краткое введение в Styled-компоненты
Краткое введение в Styled-компоненты
В настоящее время популярность Styled-компонентов становится все больше и больше. Большинство проектов, построенных на React.js, используют эту...
ДЕНЬ 8 | Страница обзора в React
ДЕНЬ 8 | Страница обзора в React
Сегодня я сделал страницу обзора с помощью react. Я использовал некоторые иконки из reacting icons и использовал генератор случайных чисел для...
Как настроить среду разработки React.
Как настроить среду разработки React.
весь процесс настройки среды разработки react.
Что вы должны знать о JSX - объяснение менее чем за 2 минуты
Что вы должны знать о JSX - объяснение менее чем за 2 минуты
React - это библиотека JavaScript для создания пользовательских интерфейсов.
Как использовать get bounds с react-leaflet и данными JSON
Как использовать get bounds с react-leaflet и данными JSON
Я считаю, что получить границы из библиотеки leaflet Js очень просто, но использование этой функции может быть немного сложным. Поэтому позвольте мне...
0
0
167
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

К сожалению, вы не можете использовать литеральные строки шаблона для создания классов попутного ветра. Они предупреждают об этом и в своих документах: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Другие вопросы по теме