...

public function getStatusClass()

{

    switch ($this->listing_status) {

        case 'Draft':

            return 'slate';

        case 'Active':

            return 'green';

        case 'Sold':

            return 'red';

        case 'Under Contract':

            return 'orange';

        case 'Pending':

            return 'purple';

        default:

            return 'gray'; // Default color for unknown status

    }

}

...

@foreach($listings as $listing)

    ...

    <td class="px-4 py-3 whitespace-nowrap">

        <span class="bg-{{ $listing->getStatusClass() }}-100 text-{{ $listing->getStatusClass() }}-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-{{ $listing->getStatusClass() }}-900 dark:text-{{ $listing->getStatusClass() }}-300">{{ $listing->listing_status }}</span>

    </td>

    ...

@endforeach

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

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

public function getStatusClass()

{

    switch ($this->listing_status) {

        case 'Draft':

            return 'bg-slate-100 text-slate-800 dark:bg-slate-900 dark:text-slate-300';

        case 'Active':

            return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300';

        case 'Sold':

            return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300';

        case 'Under Contract':

            return 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300';

        case 'Pending':

            return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300';

        default:

            return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300'; // Default color for unknown status

    }

}

@foreach($listings as $listing)

    ...

    <td class="px-4 py-3 whitespace-nowrap">

        <span class="{{ $listing->getStatusClass() }} text-xs font-medium mr-2 px-2.5 py-0.5 rounded">{{ $listing->listing_status }}</span>

    </td>

    ...

@endforeach

/** @type {import('tailwindcss').Config} */

module.exports = {

  safelist: [

    { pattern: '^bg-(slate|green|red|orange|purple|gray)-100$' },

    { pattern: '^text-(slate|green|red|orange|purple|gray)-800$' },

    {

      pattern: '^bg-(slate|green|red|orange|purple|gray)-900$',

      variants: ['dark']

    },

    {

      pattern: '^text-(slate|green|red|orange|purple|gray)-300$',

      variants: ['dark']

    },

  ]

  // …

}