Tailwind for DataTable js

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
                });
            });