Tailwind CSS

Tailwind is an interesting twist on the usual css frameworks like bootstrap. Instead of giving you a lot of pre-built blocks and components, it just gives you tons of utility classes. In css frameworks like bootstrap, you often have to override the css component classes to incorporate your design. Not in tailwind: you don’t get component classes at all, just utility classes. Idea is to never write css at all. Let me show what I mean. Reference 1. Reference 2.

<div class="bg-green-300 border-green-600 border-b p-4 m-4 rounded">
  Hello World
</div>

Will result in

Here’s what each of the above classes mean:

• bg-green-300: green background with shade 300
• border-green-600: green border with higher shade
• border-b: set border visible at bottom
• p-4 m-4: padding and margin of 4 units
• rounded: rounded corners

So, you make your own components by pulling together different utility classes from tailwind. Let me contrast this with how bootstrap does stuff. Here’s how create a card in bootstrap:

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Content goes here</p>
  </div>
</div>

But in tailwind, you have:

<div class="bg-white rounded shadow border p-6 w-64">
  <h5 class="text-3xl font-bold mb-4 mt-0">My Title</h5>
  <p class="text-gray-700 text-sm">Content goes here</p>
</div>

You may argue bootstrap code looks cleaner and better. But you’re stuck to bootstrap’s default design unless you go into overriding the css classes, which is easier said than done. On the other hand, in tailwind, you get your own card without editing any css! In other words, bootstrap is design-opinionated while tailwind is design-odor free.

Doesn’t this make your html look busy? Yep. But does it matter? Probably not because you’re using a framework like react where you write your component only once. There are other tricks), but I’ll not get into them

function MyCard() {
  return (
    <div class="bg-white rounded shadow border p-6 w-64">
      <h5 class="text-3xl font-bold mb-4 mt-0">My Title</h5>
      <p class="text-gray-700 text-sm">Content goes here</p>
    </div>
  );
}

What if you want to customize the font or colors? You just specify your theme in one place at tailwind.config.js. Here’s how it can look like

// tailwind.config.js
const colors = require("tailwindcss/colors");

module.exports = {
  theme: {
    screens: {
      sm: "480px",
      md: "768px",
      lg: "976px",
      xl: "1440px",
    },
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ["Graphik", "sans-serif"],
      serif: ["Merriweather", "serif"],
    },
    extend: {
      spacing: {
        128: "32rem",
        144: "36rem",
      },
      borderRadius: {
        "4xl": "2rem",
      },
    },
  },
};

You can add interaction too quite easily by using prefixing your classes with css pseudoselector like hover.

<div class="bg-gray-500 hover:bg-red-600 ..."></div>

How about responsiveness? Just add prefixes of sizes sm/md etc.

<div class="m-2 sm:m-4 md:m-8 lg:m-16 xl:m-32"></div>

Here, margin will change based on the screen size.

Because there are so many classes in tailwind, tailwind css can be very big. But then you don’t have to include classes you didn’t use in your build. Follow installation instructions in the website to setup for your specific stack.