the code is shown below, the red-500 applied where as green-500 does not work. Inspecting the h1 element shows the class exist but never gets applied.

Card.vue

<template>
    <div class="mb-4 border " :class="`border-${hcolor}`" >
      <h1 class="font-semibold text-white p-2 " :class="`bg-${hcolor}`" >{{ title }}</h1>
        <slot />
    </div>
</template>

<script setup>
defineProps( {
    title: {
        type: String,
        default: "Title"
    },
    hcolor: {
        type: String,
        default: 'gray-400 '
    }

})

</script>

PageView.vue

<script setup>
import PageComponent from '@/components/PageComponent.vue'
import Card from '@/components/Card.vue'
</script>
<template>
<PageComponent title="Dashboard">
    <Card hcolor="red-500" title="Students Info">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam dolores, blanditiis maxime harum, velit animi cupiditate adipisci neque nam temporibus iusto ea consequatur saepe, delectus tempore voluptatum sunt ad. Commodi.</p>
    </Card>

    <Card hcolor="green-500" title="Students Info">
        <p>Lorem ipsum `your text`dolor sit amet consectetur adipisicing elit. Ullam dolores, blanditiis maxime harepe, delectus tempore voluptatum sunt ad. Commodi.</p>
    </Card>
</PageComponent>    

</template>

Only top card is taking effect

the code is shown below, the red-500 applied where as green-500 does not work. Inspecting the h1 element shows the class exist but never gets applied.

Card.vue

<template>
    <div class="mb-4 border " :class="`border-${hcolor}`" >
      <h1 class="font-semibold text-white p-2 " :class="`bg-${hcolor}`" >{{ title }}</h1>
        <slot />
    </div>
</template>

<script setup>
defineProps( {
    title: {
        type: String,
        default: "Title"
    },
    hcolor: {
        type: String,
        default: 'gray-400 '
    }

})

</script>

PageView.vue

<script setup>
import PageComponent from '@/components/PageComponent.vue'
import Card from '@/components/Card.vue'
</script>
<template>
<PageComponent title="Dashboard">
    <Card hcolor="red-500" title="Students Info">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam dolores, blanditiis maxime harum, velit animi cupiditate adipisci neque nam temporibus iusto ea consequatur saepe, delectus tempore voluptatum sunt ad. Commodi.</p>
    </Card>

    <Card hcolor="green-500" title="Students Info">
        <p>Lorem ipsum `your text`dolor sit amet consectetur adipisicing elit. Ullam dolores, blanditiis maxime harepe, delectus tempore voluptatum sunt ad. Commodi.</p>
    </Card>
</PageComponent>    

</template>

Only top card is taking effect

• vue.js
• tailwind-css

• Check this one: tailwindcss.com/docs/content-configuration#dynamic-class-names You could use an approach like this tho. – kissu Commented Jan 20 at 10:17
• You could of course use arbitrary values but then it kinda defeats the purpose of Tailwind. – kissu Commented Jan 20 at 10:21
• You can't dynamically create class names in tailwind. The reason red-500 is working is probably because bg-red-500 is used somewhere else in your project. – Reyno Commented Jan 20 at 10:23

1 Answer 1

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS.

Don’t construct class names dynamically like this:

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes.

Instead, make sure any class names you’re using exist in full:

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

Safelisting is a last-resort, and should only be used in situations where it’s impossible to scan certain content for class names. These situations are rare, and you should almost never need this feature.

If you need to make sure Tailwind generates certain class names that don’t exist in your content files, use the safelist option:

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  safelist: [
    'bg-red-500',
    'text-3xl',
    'lg:text-4xl',
  ]
  // ...
}

Read the tailwind content configuration documentation.