How to adapt Datatable into Tailwind

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store