Tailwind for DataTable js - datatables

Question

How can I integrate Tailwind with DataTable js? There are two things I wanna do.
Add tooltip which will display the details of td when hovering that td.( The text will be ellipsed)
Responsive Table
The problem is that my table is not overflowed. When I remove the compiled css, it is fine.The overflow is working but when I add it, the overflow of the table is not working.
Html
<table id="example" class="display w-full">
</table>
Javascript
import * as JSZip from 'jszip' ;
import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
import 'datatables.net-dt';
import 'datatables.net-buttons-dt';
import 'datatables.net-buttons/js/buttons.colVis.js';
import 'datatables.net-buttons/js/buttons.html5.js';
import 'datatables.net-buttons/js/buttons.print.js';
import 'datatables.net-responsive-dt/css/responsive.dataTables.min.css';
import 'datatables.net-scroller-dt/css/scroller.dataTables.min.css';
import 'datatables/media/css/jquery.dataTables.min.css';
import 'datatables.net-buttons-dt/css/buttons.dataTables.min.css';
import 'datatables.net-fixedcolumns-dt/css/fixedColumns.dataTables.min.css';
import 'datatables.net-fixedcolumns-dt/js/fixedColumns.dataTables';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
window.JSZip = JSZip;
$(document).ready(function () {
$('#example').removeAttr('width').DataTable({
responsive:true,
scrollY:"80vh",
scrollX:"80vw",
scrollCollapse: true,
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf'
],
columnDefs: [
{
targets:'_all',
render:$.fn.dataTable.render.ellipsis(10)
},
],
data: res.data.data,
columns: col
});
});