#vue.js #tailwind-css
Вопрос:
я использую TailwindCss с vue
если я напишу компонент, у него будет реквизит, похожий на цвет:
<script setup>
defineProps({
color: String // give me like: green
})
</script>
<div class="`bg-${color}-500`"> </div>
Но когда я вижу результат, цвет не появляется, потому что Попутный ветер не понял, что использовался этот цвет
Ответ №1:
Класс не применяется, потому что браузер не понимает синтаксис bg-${color}-500 . Используйте встроенную функцию Vue v-bind:class="" или используйте стенографию : , чтобы сделать эту работу
<div :class="`bg-${color}-500`"> </div>
Ответ №2:
Добавляя к Markiesch, Tailwind предлагает не писать классы таким образом, поскольку они не распознаются очистителем при сборке, что означает, что класс, как вы его написали, скорее всего, не будет работать в производстве.
Состояние документов попутного ветра:
