N
Nuxt7mo ago
David

Tailwind dynamic color class doesn't work

Hello, I have this component: MyComponent.vue
<script setup lang="ts">
import colors from '../../ui.config'

withDefaults(defineProps<{
title: string,
color?: keyof typeof colors,
icon?: string,
}>(), {
color: 'blue',
})
</script>

<template>
<div :class="colors[$props.color!]" class="border-l-4 rounded-l-sm rounded-r-md space-y-2 px-4 py-3">
<h4 class="flex items-center space-x-2 text-inherit font-semibold">
<Icon v-if="icon" :name="icon" class="w-4 h-4 inline-block" />
<span>{{ title }}</span>
</h4>
<slot />
</div>
</template>
<script setup lang="ts">
import colors from '../../ui.config'

withDefaults(defineProps<{
title: string,
color?: keyof typeof colors,
icon?: string,
}>(), {
color: 'blue',
})
</script>

<template>
<div :class="colors[$props.color!]" class="border-l-4 rounded-l-sm rounded-r-md space-y-2 px-4 py-3">
<h4 class="flex items-center space-x-2 text-inherit font-semibold">
<Icon v-if="icon" :name="icon" class="w-4 h-4 inline-block" />
<span>{{ title }}</span>
</h4>
<slot />
</div>
</template>
And ui.config.ts
export default {
blue: 'border-l-blue-500 bg-blue-100 text-blue-500',
red: 'border-l-red-500 bg-red-100 text-red-500',
green: 'border-l-green-500 bg-green-100 text-green-500',
yellow: 'border-l-yellow-500 bg-yellow-100 text-yellow-500'
}
export default {
blue: 'border-l-blue-500 bg-blue-100 text-blue-500',
red: 'border-l-red-500 bg-red-100 text-red-500',
green: 'border-l-green-500 bg-green-100 text-green-500',
yellow: 'border-l-yellow-500 bg-yellow-100 text-yellow-500'
}
But as you can see the colors not showing
No description
1 Reply
CentyPoo
CentyPoo7mo ago
is ui.config.ts in the root folder? if you take a look here (if you're using the nuxt plugin), you can see where it looks for tailwind classes by default https://tailwindcss.nuxtjs.org/tailwind/config#default-configuration and it does not look for *.ts in the root folder
Nuxt TailwindCSS
Config - Nuxt Tailwind
This module comes with a default Tailwind configuration file to provide the best possible user experience.
Want results from more Discord servers?
Add your server