N
Nuxt•11mo 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
Centy
Centy•11mo 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.

Did you find this page helpful?