Nuxt•3mo ago

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

1 Reply

CentyPoo•3mo 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.

Gaming

Programming

Tailwind dynamic color class doesn't work