JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/dt-1.11.3/fc-4.0.1/fh-3.2.0/r-2.2.9/datatables.min.js"></script>
<div class="container-fluid my-5">
<table class="table table-hover datatable table-bordered">
  <thead class="thead-light text-center">
    <tr>
      <th>Name</th>
      <th>Value of TR.CLASS</th>
    </tr>
  </thead>
  <tbody>
    <tr class="">
      <td>One</td>
      <td class="text-center">none</td>
    </tr>
    <tr class="table-warning">
      <td>Two</td>
      <td class="text-center">table-warning</td>
    </tr>
    <tr class="table-success">
      <td>Three</td>
      <td class="text-center">table-success</td>
    </tr>
  </tbody>
</table>
</div>
<div class="mx-2 p-2 border border-primary">
  Datatables Bootstrap5 problem with background-color on TR<br>
  Example : table-warning, table-success, only on hover ?
</div>

CSS

@import 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css';
@import 'https://cdn.datatables.net/v/bs5/dt-1.11.3/fc-4.0.1/fh-3.2.0/r-2.2.9/datatables.min.css';

JavaScript

$('.datatable').dataTable({
  'createdRow': function(row, data, dataIndex) {
    if (data[1] != 'none' ) {
      $(row).addClass(data[1]);
    }
  }
});