Tailwind CSS Plugin for Optimizing Bootstrap Grid

Majid Behzadnasab — Wed, 19 Jul 2023 20:43:36 +0000

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all the building blocks you need to build bespoke designs. However, one thing that Tailwind doesn't directly provide out of the box is a robust grid system like the one Bootstrap has.

Bootstrap's grid system, powered by flexbox, has a twelve-column system, five default responsive tiers, and a mobile-first system. Tailwind CSS, on the other hand, uses CSS Grids which technically can have however many columns and responsive tiers you'd like to have, offering more flexibility and customizability.

So, how do you bring the Bootstrap-like grid system into Tailwind CSS? That's where our plugin, tw-bootstrap-grid-optimizer, comes into play.

This plugin aims to bridge the gap between the grid system of Bootstrap and the utility classes of Tailwind CSS. With tw-bootstrap-grid-optimizer, you can manage your grid system in Tailwind just like you would in Bootstrap.

github: https://github.com/mbehzad-bhz/tw-bootstrap-grid-optimizer
npm: https://www.npmjs.com/package/tw-bootstrap-grid-optimizer

How to use it?
Firstly, install the plugin via npm:

npm i tw-bootstrap-grid-optimizer

Next, include it in your Tailwind CSS configuration:

const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: ['./src/**/*.{js,jsx,ts,tsx,css,scss}', './index.html'],
  darkMode: 'media',
  development: true,
  mode: "jit",
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('tw-bootstrap-grid-optimizer')
  ],
});

Now, you are ready to use Bootstrap-like classes in your Tailwind project. Let's look at a simple example:

function App() {
    return (
        <>
            <div className="container bg-red-600 text-center">
                <div className="row">
                    <div className="sm:col-6 md:col-4">Column 1</div>
                    <div className="sm:col-6 md:col-4">Column 2</div>
                    <div className="sm:col-6 md:col-4">Column 3</div>
                </div>
            </div>
        </>
    )
}

With the plugin, you are not only limited to simple designs, but you can also manage more complex layouts. Here is an example with a table:

function App() {
  return (
    <div className="container">
      <div className="row">
        <div className="sm:col-12 md:col-8">
          <table className="table-auto w-full">
            <thead>
              <tr>
                <th className="border px-4 py-2">Name</th>
                <th className="border px-4 py-2">Age</th>
                <th className="border px-4 py-2">Email</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="border px-4 py-2">John Doe</td>
                <td className="border px-4 py-2">30</td>
                <td className="border px-4 py-2">john@example.com</td>
              </tr>
              <tr>
                <td className="border px-4 py-2">Jane Doe</td>
                <td className="border px-4 py-2">25</td>
                <td className="border px-4 py-2">jane@example.com</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="md:col-4 hidden sm:block">
          <div className="p-4 bg-blue-300">Sidebar content here</div>
        </div>
      </div>
    </div>
  );
}

With tw-bootstrap-grid-optimizer, your Tailwind CSS projects can now leverage the simplicity and familiarity of Bootstrap's grid system, making your development process even more efficient and enjoyable. Give it a try today!

Please feel free to adjust the content as per your requirements.

DEV Community: Majid Behzadnasab

Tailwind CSS Plugin for Optimizing Bootstrap Grid