How to make table head rounded edge in version 2.2 ??
How to make table head rounded edge in version 2.2 ??

I achieved some level of round edge but couldn't make table border rounded Please, refer the picture for actual requirement.
CSS:
$('.table.dataTable.table-sm > thead > tr th.dt-orderable-asc, ' +
'.table.dataTable.table-sm > thead > tr th.dt-orderable-none,' +
'table.dataTable.table-sm > thead > tr th.dt-orderable-desc, ' +
'table.dataTable.table-sm > thead > tr th.dt-ordering-asc').addClass('!bg-blue-500 text-white');
$('.dataTable thead th:first-child').addClass('!border-1 !rounded-tl-lg');
$('.dataTable thead th:last-child').addClass('!border-1 !rounded-tr-lg');
Answers
https://live.datatables.net/yinapiwe/1/edit ?
Can you link to your test case showing the issue if that doesn't help.
Allan
thanks allan,
Still not able to achieve rounded edges as achieved in your example.
I'm new to CSS world especially Tailwindcss
in fact the whole full stack world 
html+tailwind:
<div class="flex w-full overflow-hidden">
<div class="container-fluid overflow-auto bg-gray-400 p-2">
<table id="studentTable" class="container-fluid table table-bordered border-black rounded-lg ">
<thead class="h-12 align-middle text-md font-semibold ">
<tr>
................... removed for brevity
datatable initialization:
$('#studentTable').DataTable({
dom: '<"top-container d-flex justify-content-between"<"float-start"f><"buttons-container"B>><"bottom"t><"pagination-container pt-1 d-flex justify-content-end"p>',
buttons: [
{
text: 'Add',
className: 'btn btn-success rounded mb-2',
action: function (e, dt, node, config) {
window.addStudentDetails('', 'add');
},
},
],
info: false,
paging: true,
searching: true,
searchable: true,
responsive: true,
lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
pageLength: window.innerHeight > 800 ? 20 : 12,
bProcessing: true,
bServerSide: true,
ajax: {
url: '{!!route('students.index')!!}',
});
I'm happy to take a look at a test case showing the issue.
Allan