DeveloperBreeze

Automatically add Tailwind CSS and jQuery classes to any table

javascript css html
#CSS Classes #Tailwind CSS #Frontend development #User Interface #Frontend Design #table styling #responsive design #styling tables #CDN #utility-first CSS framework #jQuery script #document ready #hover effect #padding #background color #text alignment #web design #table elements #Tailwind classes #responsive tables #UI enhancement #CSS utilities

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.

Continue Reading

Handpicked posts just for you — based on your current read.

10 Insanely Game-Changing Hacks for Web Developers in 2025: Code Smarter, Not Harder

Why reinvent the wheel?

AI coding assistants like GitHub Copilot aren’t just buzzwords—they’re the secret sauce to cutting down repetitive tasks and slashing development time. Let these smart tools predict your next move, catch errors on the fly, and even help with documentation.

Feb 11, 2025 Article

Mastering Modern Web Development: Trends, Tools, and Tutorials for 2025 and Beyond

Whether you’re following our step-by-step tutorials or exploring the latest tech trends, remember that the world of web development is vast and full of opportunities. Keep learning, keep experimenting, and most importantly, have fun creating amazing digital experiences.

Ready to dive deeper? Check out our full range of tutorials and articles to level up your web development skills today!

Feb 11, 2025 Article

Building a Laravel Application with Vue.js for Dynamic Interfaces

Create a new Laravel project or use an existing one:

   composer create-project --prefer-dist laravel/laravel laravel-vue-app
   cd laravel-vue-app
   npm install

Nov 16, 2024 Tutorial

Dynamic and Responsive DataTable with Server-Side Processing and Custom Styling

  • language.emptyTable: Custom message displayed when no data is available.
  • initComplete: Adds custom classes to dropdowns and inputs in the DataTables UI for consistent styling.

Oct 24, 2024 Code

Integrating Flowbite with Tailwind CSS: A Step-by-Step Tutorial

Before you begin, ensure you have the following:

Oct 24, 2024 Article

Google Chrome vs. Chromium: Understanding the Key Differences

  • Synchronization of Data: Chrome can sync bookmarks, history, passwords, and settings across devices through a Google account.
  • Usage Statistics and Crash Reports: Chrome collects anonymized data on browser usage and reports crashes to Google to enhance stability and performance.
  • Integration with Google Services: Features like Google Safe Browsing protect users from malicious websites by leveraging Google's threat intelligence.

While these data collection practices enhance functionality and security, they raise privacy concerns for some users who prefer minimal data sharing.

Oct 24, 2024 Article

Best Tools for Generating Backgrounds Patterns for Your Website

These tools make it easy to generate high-quality patterns for use in web design, social media graphics, or even personal projects. From powerful auto-generators like GeoPattern to fully customizable platforms like PatternPad, there’s a tool for every type of designer.

Start exploring these platforms to find the perfect patterns for your website! Whether you need something subtle or a bold background, these tools will help you design it quickly and easily.

Oct 21, 2024 Cheatsheet

CSS Variables and Custom Properties: Dynamic Theming and Beyond

CSS variables are perfect for managing color schemes that can be easily changed or updated across a site.

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --background-color: #f5f5f5;
}

body {
    background-color: var(--background-color);
}

.button {
    background-color: var(--primary-color);
    color: white;
}

Sep 05, 2024 Tutorial

Advanced Flexbox Techniques: Creating Responsive and Adaptive Designs 

.nav {
    display: flex;
    justify-content: space-between;
}

@media (max-width: 600px) {
    .nav {
        flex-direction: column;
    }
}

This creates a horizontal navigation bar on larger screens, which collapses into a vertical menu on smaller screens.

Sep 05, 2024 Tutorial

Creating a Dropdown Menu with JavaScript 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dropdown Menu</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="navbar">
    <ul class="menu">
      <li class="menu-item">
        <a href="#">Home</a>
      </li>
      <li class="menu-item dropdown">
        <a href="#" class="dropdown-toggle">Services</a>
        <ul class="dropdown-menu">
          <li><a href="#">Web Development</a></li>
          <li><a href="#">App Development</a></li>
          <li><a href="#">SEO Optimization</a></li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="#">Contact</a>
      </li>
    </ul>
  </nav>
  <script src="script.js"></script>
</body>
</html>

Next, we’ll style the menu using CSS. We’ll start by styling the basic menu and then hide the dropdown menu by default.

Sep 02, 2024 Tutorial

Comprehensive React Libraries Cheatsheet

No preview available for this content.

Aug 21, 2024 Cheatsheet

Responsive Design Frameworks Cheatsheet

  • Bootstrap: Best for fast development with lots of components.
  • Foundation: Good for scalable, enterprise-level apps.
  • Bulma: Lightweight and easy to learn.
  • Tailwind CSS: Highly customizable with utility-first approach.
  • Materialize: Clean Material Design look.
  • Semantic UI: Human-friendly HTML with good customization.

Evaluate the requirements of your project and choose the framework that best fits your workflow and design goals.

Aug 21, 2024 Cheatsheet

Ultimate Front-End Development Design Tips Cheatsheet: Essential Pro Tips for Mastering Web Design

No preview available for this content.

Aug 21, 2024 Cheatsheet

Front-End Development Tools and Libraries Cheatsheet

No preview available for this content.

Aug 21, 2024 Cheatsheet

Building a Chrome Extension: A Step-by-Step Tutorial

To test your extension:

  • Use chrome://extensions/ to inspect your extension and check for any errors.
  • Use Chrome DevTools to debug your extension's popup and content scripts.

Aug 20, 2024 Cheatsheet

React Performance Optimization Cheatsheet: Hooks, Memoization, and Lazy Loading 

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

This approach ensures that only the necessary code is loaded, reducing the initial load time and improving overall performance.

Aug 20, 2024 Cheatsheet

Optimizing HTML Delivery in Flask with Minification and Compression 

@app.after_request
def after_request(response):
    if response.content_type == 'text/html; charset=utf-8':
        response.set_data(minify(response.get_data(as_text=True)))
        response.headers['Cache-Control'] = 'public, max-age=3600'
    return response
  • Cache-Control: public, max-age=3600: Instructs the browser to cache the HTML content for 3600 seconds (1 hour), reducing the number of requests made to the server.

Aug 20, 2024 Tutorial

Building a React Application with Vite and Tailwind CSS 

  npm install axios
  • Heroicons: A collection of free, MIT-licensed high-quality SVG icons for you to use in your web projects.

Aug 14, 2024 Tutorial

Integrating Laravel and React with Vite: Using Databases and PHP in a Full-Stack Project 

   import React, { useState, useEffect } from 'react';
   import axios from 'axios';

   function Posts() {
       const [posts, setPosts] = useState([]);

       useEffect(() => {
           axios.get('/api/posts')
               .then(response => {
                   setPosts(response.data);
               })
               .catch(error => {
                   console.error('There was an error fetching the posts!', error);
               });
       }, []);

       return (
           <div>
               <h1>Posts</h1>
               <ul>
                   {posts.map(post => (
                       <li key={post.id}>{post.title}</li>
                   ))}
               </ul>
           </div>
       );
   }

   export default Posts;

Create a form in React to submit new posts:

Aug 14, 2024 Tutorial

Integrating Vite with Laravel for Modern Web Development

Then, add it to your vite.config.js:

   import vue from '@vitejs/plugin-vue';

   export default defineConfig({
       plugins: [
           laravel({
               input: ['resources/css/app.css', 'resources/js/app.js'],
               refresh: true,
           }),
           vue(),
       ],
   });

Aug 14, 2024 Tutorial

Discussion 0

Please sign in to join the discussion.

No comments yet. Start the discussion!