Customization with Tailwindcss

Without any doubt, Tailwindcss became famous because of its customization system. By the time, Bootstrap was dominating CSS libraries — was it the first ever by the way? — and we owe a lot to it, thanks to Twitter’s team. However, Javascript’s frameworks dominance oriented customization on the JS side instead of CSS/SASS/LESS… chosen by Bootstrap.

Tailwind.config.js — a file to customize your theme

In my previous article, I explained how to setup Tailwindcss.

When you init Tailwind, at the root of your project, it creates a tailwind.config.js. This file is read by Tailwind to build your final css sheet.

Tailwindcss is building all its CSS classes based on this customization file. When your file is empty, Tailwind heritates from its basic styling (colors, sizes, spacing…). Here’s a quick code snippet to show an example:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    fontSize: {}, // overwrite tailwindcss sizes for yours...
    fontFamily: {},
    fontWeight: {},
    borderRadius: {},
    extend: { // extend existing classes
      colors: {},
      spacing: {}
    },
  },
  plugins: [],
}

Of course when you look for customization, you may not want to use Tailwindcss basic styling. However, I always do both.

Do you need to always customize Tailwindcss?

The answer is… no. Tailwind is providing everything you need to start developing. Its initial stylesheet is enough — and I have to admit that I use this one 80% of the time.

What I like is to have the choice. I don’t necessarely have to customize; however I always do. On top of initial Tailwindcss. Because I don’t have time to rewrite an entire CSS library. But Tailwind is giving me the opportunity to do it on top of the work already done.

Tailwindcss vs Boostrap?

This is the strength of Tailwind — you start with a CSS stylesheet really optimized for Front-End devs. In short, you won hours of course. But you’ll tell me: exactly like Bootstrap, right?

In short: Bootstrap is providing a CSS lib. Tailwind does too. Bootstrap is providing a component lib. Tailwind doesn’t.

In my opinion: I’d say that Tailwind went further way in the developers needs in comparison to Bootstrap. We don’t necessarely refuse to write CSS; however we want to be able to use an existing library that gives us the choice to customize.

Guillaume