To automatically add Tailwind CSS and jQuery classes to any table on a page, use the following approach.
1. Include jQuery and Tailwind CSS
<!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>
Explanation
Tailwind CSS:
The <link> tag includes Tailwind CSS via CDN, enabling use of utility classes.
jQuery:
The <script> tag includes jQuery, which is used to apply classes dynamically to the table elements.
jQuery Script Behavior:
- Runs when the document is ready.
- Selects all
<table> elements. - Applies Tailwind CSS classes to each table and its child elements.
Tailwind Classes Applied
table:
min-w-full: Full-width table.bg-white: White background.border border-gray-200: Adds border.
thead:
bg-gray-50: Light gray header background.
th:
px-6 py-3: Padding.text-left text-xs font-medium text-gray-500 uppercase tracking-wider: Header text styling.border-b border-gray-200: Bottom border.
tbody:
bg-white divide-y divide-gray-200: White background and row separators.
tr:
hover:bg-gray-100: Hover effect.
td:
px-6 py-4 whitespace-nowrap text-sm text-gray-900: Data cell styling.
Feel free to adjust the class names to fit your design requirements.