DeveloperBreeze

Notes Programming Tutorials, Guides & Best Practices

Explore 57+ expertly crafted notes tutorials, components, and code examples. Stay productive and build faster with proven implementation strategies and design patterns from DeveloperBreeze.

Automatically add Tailwind CSS and jQuery classes to any table

Note August 03, 2024
javascript css html

To automatically add Tailwind CSS and jQuery classes to any table on a page, use the following approach.

<!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>

Read More