Table formatting with Tailwind

Here is a problem that makes me crazy, and i know is probably because i have not studied css in detail. I'm creating a table, i made the background of the header row blue. Now i want to change the background of the row on the body section. The browser seems to ignore my class.

<table class="table w-full bg-white border-collapse">
        <thead>
            <tr class="bg-blue-400 border text-center px-8 py-4">
                <th>Route</th>
                <th>Departure</th>
                <th>Driver</th>
                <th>Truck</th>
                <th>Stops</th>
                <th>Cases</th>
                <th>Shorts</th>
                <th colspan="2">Built</th>
                <th colspan="2">Picked</th>
                <th colspan="2">Invoiced</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($routes as $route)
            <tr class="bg-blue-500 border text-center h-9 ">
                <td> {{$route->key}}</td>
                <td>
                    {{$route->planned_departure->toTimeString()}}
                </td>
                <td>N/A</td>
                <td>N/A</td>
                <td>{{$route->total_stops}}</td>
                <td>{{$route->planned_size1}}</td>
                <td>10</td>
                <td>
                    {{$route->planned_departure->addMinutes(-$builtTime)->toTimeString()}}
                </td>
                @if ($route->built)
                <td style="color: green">
                    <i class="fas fa-solid fa-check"></i>
                </td>
                @else
                <td style="color: red">
                    <i class="fa-solid fa-circle-xmark"></i>
                </td>
                @endif
                <td>
                    {{$route->planned_departure->addMinutes(-$pickedTime)->toTimeString()}}
                </td>
                @if ($route->picked)
                <td style="color: green">
                    <i class="fas fa-solid fa-check"></i>
                </td>
                @else
                <td style="color: red">
                    <i class="fa-solid fa-circle-xmark"></i>
                </td>
                @endif
                <td>
                    {{$route->planned_departure->addMinutes(-$invoicedTime)->toTimeString()}}
                </td>
                @if ($route->invoiced)
                <td style="color: green">
                    <i class="fas fa-solid fa-check"></i>
                </td>
                @else
                <td style="color: red">
                    <i class="fa-solid fa-circle-xmark"></i>
                </td>
                @endif
            </tr>
            @endforeach
        </tbody>
    </table>

in the Chrome developer tools i see that bg-blue-400 was applied to to the thead.tr:

.text-center {
    text-align: center;
}
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.bg-blue-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}
.border {
    border-width: 1px;
}

but not to the tbody.tr:

element.style {
}
.text-center {
    text-align: center;
}

.border {
    border-width: 1px;
}
.h-9 {
    height: 2.25rem;
}