Tailwind- dark mode- Table.

[emiliobarrionuevo]

I made a table with Tailwind, customized with colors for dark and light mode. The big problem I have is that when I change the mode (light-dark), these changes are not applied to my table, it stays in a single color and nothing is modified. Someone could help me?

<Layout title={W`}>

<!-- table one -->
<div class="flex justify-center items-center py-20">
  <div class="relative overflow-x-auto shadow-lg rounded-lg ">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 border-collapse">
          <thead class="text-ms text-gray-900 uppercase bg-yellow-300 dark:bg-green-300">
            <tr>
              <th scope="col" class="eq text-sm text-center px-5 py-3">Team</th>
              <th scope="col" class="pun text-center text-ms px-2 py-3 bg-yellow-300 dark:bg-green-500">PTS</th>
              <th scope="col" class="px-7 py-5">PJ</th>
              <th scope="col" class="px-7 py-5">PG</th>
              <th scope="col" class="px-7 py-5">PP</th>
              <th scope="col" class="px-7 py-5">SF</th>
              <th scope="col" class="px-7 py-5">SC</th>
              <th scope="col" class="px-7 py-5">DFS</th>
            </tr>
          </thead>
          <tbody>
            {PrimeraDamasTeams.map((team, index) => (
              <tr>
                <th scope="row" class={`${index === 0 ? 'text-center' : ''} text-lg px-5 py-3 font-normal border-b-4  dark:border-t-blue-400 text-gray-500 whitespace-normal dark:text-white dark:bg-slate-400`}>
                  {team.name}
                </th>
                <td class="text-center text-lg px-6 py-4 bg-green-500 dark:bg-yellow-300 dark:text-black ">
                  {team.points}
                </td>
                <td class="text-center border-t dark:border-t-gray-100 text-lg px-5 py-3 dark:bg-yellow-300">
                  {team.pj}
                </td>
                <td class="text-center border-t dark:border-t-gray-700 text-lg px-5 py-3 dark:bg-yellow-300">
                  {team.pg}
                </td>
                <td class="text-center border-t dark:border-t-gray-700 text-lg px-5 py-3 dark:bg-yellow-300">
                  {team.pp}
                </td>
                <td class="text-center border-t dark:border-t-gray-700 text-lg px-5 py-3 dark:bg-yellow-300">
                  {team.sf}
                </td>
                <td class="text-center border-t dark:border-t-gray-700 text-lg px-5 py-3 dark:bg-yellow-300">
                  {team.sc}
                </td>
                <td class="text-center border-t dark:border-t-gray-700 text-lg px-5 py-3 dark:bg-yellow-300">
                  {team.dfs}
                </td>
              </tr>
            ))}
          </tbody>
    </table>
  </div>
</div>

`