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>1 One</td>
      <td>none</td>
    </tr>
    <tr>
      <td>2 Two</td>
      <td class="text-center">table-warning</td>
    </tr>
    <tr>
      <td>3 Three</td>
      <td class="text-center">table-success</td>
    </tr>
     <tr>
      <td>4 Four</td>
      <td class="text-center">table-dark</td>
    </tr>
     <tr>
      <td>5 Five</td>
      <td class="text-center">table-active</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('text-end');
    } else {
			$(row).addClass(data[1]);
    }
  }
});