My HTML is updating correctly to change colour with tailwind, but the browser only actually updates with the colour gray, not other colours, why?

I’m using JS, to update the background colour of an HTML element using tailwind.
It works with the colour gray, but not any other colour.

If I change yellow or green with gray, they update correctly, if I change gray with another colour, it doesn’t work correctly. So, the code is working fine, if I check console, it has the correct tailwind class, it’s just that the browser is not updating the colour displayed, unless it’s gray.

Any ideas why?

It also only updates with 200, so if it’s bg-gray-200 it changes colour, but if it’s anything else, it doesn’t.

Code below:

 for (let i = 0; i < 6; i++) {
            let letterColour = 'yellow'
            let box = row.children[i]
            let letter = currentGuess[i]
            let letterPosition = correctWord.indexOf(currentGuess[i])
            console.log(letterPosition)

            if (letterPosition === -1) {
                letterColour = "gray"
                let colour = "red"
                colourKeyboard(letter, colour)
            }
            else if (currentGuess[i] === correctWord[i]) {
                letterColour = "green"
                let colour = "green"
                colourKeyboard(letter, colour)
            }
 
            let backgroundColour = `bg-${letterColour}-200`
            console.log(backgroundColour)
            box.classList.add(backgroundColour)
            console.log(box)
        }