React - TailwindCss - Color tones not working correctly in EventModel component

I'm creating an event model in React and using an array for different background color tones. However, I noticed that when specifying the color tones, only the blue color appears. What should I do to make the other colors show up? Here's the code snippet:

import React, { useContext, useState } from 'react'
import GlobalContext from '../context/GlobalContext'

const labelsClasses = [
  "indigo",
  "gray",
  "blue",
  "pink",
  "purple",
  "red",
];

export default function EventModel() {
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')
  const { setShowEventModel, daySelected } = useContext(GlobalContext)

  return (
    <div className='h-screen w-full fixed left-0 top-0 flex justify-center items-center'>
      <form className='bg-white rounded-lg shadow-2xl w-1/4'>
        <header className='bg-gray-100 px-4 py-2 flex justify-between items-center'>
          <span className='material-icons-outlined text-gray-400'>
            drag_handle
          </span>
          <button onClick={() => setShowEventModel(false)}>
            <span className='material-icons-outlined text-gray-400'>
              close
            </span>
          </button>
        </header>
        <div className="p-3">
          <div className="grid grid-cols-1/5 items-end gap-y-7">
            <div></div>
            {/* Other components */}
            <div className="flex gap-x-2">
              {labelsClasses.map((lblClass, i) => (
                <span
                  key={i}
                  className={`bg-${lblClass}-700 w-5 h-5 rounded-full flex items-center justify-center cursor-pointer`}
                >
                  <span className='material-icons-outlined text-black text-sm'>
                    check
                  </span>
                </span>
              ))}
            </div>
          </div>
        </div>
      </form>
    </div>
  )
}

If I change the BG-500 to BG-100, it starts to appear as gray.

className={`bg-${lblClass}-700 w-5 h-5 rounded-full flex items-center justify-

As per the documentation:

> 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
>
> vue
> <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:
>
> Always use complete class names
>
> vue
> <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
>

You could consider have the full class names in labelsClasses like:

const labelsClasses = [
  "bg-indigo-700",
  "bg-gray-700",
  "bg-blue-700",
  "bg-pink-700",
  "bg-purple-700",
  "bg-red-700",
];

…

{labelsClasses.map((lblClass, i) => (
  <span
    key={i}
    className={`${lblClass} …`}
  >