Published on August 03, 2024By DeveloperBreeze

To automatically add Tailwind CSS and jQuery classes to any table on a page, you can use jQuery to select all table elements and apply the necessary classes. Here's a simple jQuery script to do that:

    • Include jQuery and Tailwind CSS in your HTML file:

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

<!-- Your table content -->
<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 you to use its utility classes.

  • jQuery: The script tag includes jQuery, which is used to apply classes to the tables.

  • jQuery Script:

- The script runs when the document is ready.

- It selects all <table> elements on the page and applies Tailwind CSS classes.

- The classes add styles such as full width, background color, padding, text alignment, and hover effects.

Tailwind Classes Applied:

table:

- min-w-full: Sets the table to full width.

- bg-white: Sets the table background to white.

- border border-gray-200: Adds a border to the table.

thead:

- bg-gray-50: Sets a light gray background for the table header.

th:

- px-6 py-3: Adds padding to header cells.

- text-left text-xs font-medium text-gray-500 uppercase tracking-wider: Styles the text in header cells.

tbody:

- bg-white divide-y divide-gray-200: Sets a white background and adds division lines between rows.

tr:

- hover:bg-gray-100: Adds a hover effect to rows.

td:

- px-6 py-4 whitespace-nowrap text-sm text-gray-900: Adds padding and styles the text in data cells.

Feel free to customize the classes to match your design preferences.

Comments

Please log in to leave a comment.

Continue Reading:

JavaScript Promise Example

Published on January 26, 2024

php

JavaScript Add Animation to HTML Element

Published on January 26, 2024

javascript

Lazy-loaded Image

Published on January 26, 2024

html

Tailwind Browser Mockup

Published on January 26, 2024

Tailwind & AlpineJs Accordion

Published on January 26, 2024

Drag and drop Input

Published on January 26, 2024

Tailwind Drag and Drop Input

Published on January 26, 2024

Simple and Clean Tailwind Buttons

Published on January 26, 2024

Tailwind Buttons with Arrow Icon

Published on January 26, 2024