tailwind not updating

'use client'

function magicColor(arrColor:Array<string> , arrVal:Array<string>) {
    let c = ""
    let randomIndex
    let item
    randomIndex = Math.floor(Math.random() * arrColor.length)
    item = arrColor[randomIndex]
    c += item + "-"
    randomIndex = Math.floor(Math.random() * arrVal.length)
    item = arrVal[randomIndex]
    c += item
    console.log(c)
    return c
}

async function colorSeconds() {
    const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));

    let seconds = document.getElementById("seconds")
    let seconde = document.getElementById("seconde")
    let secondc = document.getElementById("secondc")
    let secondo = document.getElementById("secondo")
    let secondn = document.getElementById("secondn")
    let secondd = document.getElementById("secondd")

    const colorArr = ["slate" , "gray" , "zinc" , "neutral" , "stone" , "red" , "orange" , "amber" , "yellow" , "lime" , "green" , "emerald" , "teal" , "cyan" , "sky" , "blue" , "indigo" , "violet" , "purple" , "fuchsia" , "pink" , "rose"]
    const numArr = ["50" , "100" , "200" , "300" , "400" , "500" , "600" , "700" , "800" , "900"]

    let magicClr
    while (1) {
        await sleep(1000)
        magicClr = magicColor(colorArr , numArr)
        await sleep(1000)
        seconds!.className = "text-" + magicClr
        await sleep(1000)
        seconde!.className = "text-" + magicClr
        await sleep(1000)
        secondc!.className = "text-" + magicClr
        await sleep(1000)
        secondo!.className = "text-" + magicClr
        await sleep(1000)
        secondn!.className = "text-" + magicClr
        await sleep(1000)
        secondd!.className = "text-" + magicClr
        await sleep(1000)
    }
}

export default function Home() {

    return (
        <main onClick={colorSeconds} className="p-6 w-5/6 text-2xl text-center">
            <span id="seconds" className="text-white">s</span>
            <span id="seconde" className="text-white">e</span>
            <span id="secondc" className="text-white">c</span>
            <span id="secondo" className="text-white">o</span>
            <span id="secondn" className="text-white">n</span>
            <span id="secondd" className="text-white">d</span>
        </main>
    )
}