How to adapt Datatable into Tailwind

DataTables (https://datatables.net) is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table. Currently, it’s the most used JS table for web applications and admin panels in the world.

I have used it for several years within Bootstrap, recently, I’m using Tailwind but I have some issue with Datatable CSS so I built a simple “adapter” to fix issues. Let me show it:

.dataTables_wrapper select,
.dataTables_wrapper .dataTables_filter input {
    color: #4a5568;
    margin-left: 5px !important;
    padding-left: .5rem !important;
    padding-right: .9rem !important;
    line-height: 1;
    border-width: 2px;
    border-radius: .25rem;
    border: none !important;
    background-color: #edf2f7;
    background-position: right 0px center;
    font-size: .8rem;
}
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: #ebf4ff;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-weight: 700;
    border-radius: .25rem;
    border: 1px solid transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
    font-weight: 700;
    border-radius: .25rem;
    background: #D3D3D3 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #000 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
    font-weight: 700;
    border-radius: .25rem;
    background: #D3D3D3 !important;
    border: none !important;
}
table.dataTable.no-footer {
    border-bottom: 1px solid #e2e8f0;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
    background-color: #D3D3D3 !important;
}