<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Styling with Tailwind CSS</title>
<!-- Include Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- Example table -->
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
<!-- jQuery script to apply classes -->
<script>
$(document).ready(function() {
$('table').each(function() {
$(this).addClass('min-w-full bg-white border border-gray-200');
$(this).find('thead').addClass('bg-gray-50');
$(this).find('th').addClass('px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200');
$(this).find('tbody').addClass('bg-white divide-y divide-gray-200');
$(this).find('tr').addClass('hover:bg-gray-100');
$(this).find('td').addClass('px-6 py-4 whitespace-nowrap text-sm text-gray-900');
});
});
</script>
</body>
</html>
The <link> tag includes Tailwind CSS via CDN, enabling use of utility classes.