My inertia app does not detect some specific colors from Tailwind (Laravel Vue inertia tailwind) - vuejs3

Question

My app does not detect some colors of the Tailwind palette.
In this case, text-green-500 called primaryColorGreen and text-indigo-600 called secondaryColor are working properly.
However, text-red-300 as primaryColorRed is not working, but it does work if I change text-red-300 to `text-red-600.
If I change text-green-500 for text-green-300 it doesn't work.
The same for the indigo color...in general only some colors are working.
Layout.js:
export const useLayoutStore = defineStore('layout', {
state: () => (
{
navigation: [],
currentModels: [],
currentRoute: 'x',
theme: {
classes: {
primaryColorGreen: 'text-green-500',
},
},
color: {
primary: {
primaryColorRed: 'text-red-300',
}
},
textColor: {
secondary: {
secondaryColor: 'text-indigo-600',
}
}
}
),
});
HandleInertiaRequest.php:
'theme'=>[
'classes'=>[
'primaryColorGreen' => 'text-green-500',
],
],
'color' => [
'primary' => [
'primaryColorRed' => 'text-red-300',
]
],
'textColor' => [
'secondary' => [
'secondaryColor' => 'text-indigo-600',
]
],
Vue page:
<script setup>
import {useLayoutStore} from '#/Stores/layout';
const theme = useLayoutStore().theme //
const color = useLayoutStore().color
const textColor = useLayoutStore().textColor
</script>
<template>
<h2 class="mx-auto max-w-2xl text-4xl font-bold tracking-tight">
<span:class="theme.classes.primaryColorGreen">hello</span>
<span:class="color.primary.primaryColorRed">how are you</span>
<span :class="textColor.secondary.secondaryColor"> Raul</span>
</h2>

Answer 1

If you are using Laravel Jetstream with Intertia stack, then the location of your file containing Tailwind classes are probably aren't scanned by tailwind. which normally scan php and vue files inside resources directory
check the tailwind.config.js and add those files which contains tailwind css classes.
or move those files to somewhere that are scan by tailwind default config