Quentin's mind

Why you absolutely need to try TailwindCSS

Why you absolutely need to try TailwindCSS

Quentin's photo
Quentin
·

5 min read

Some background

I've started using TailwindCSS earlier this year after months of listening to a friend that had been recommending it to me. For some time, I was thinking: "Hmm, this will be yet another CSS framework with some built-in grid system, some default designs and UI's. Not so interested."

I could not have been more wrong.

For starters, TailwindCSS that was first released on alpha back in 2017. Instead of being a component based framework, it is much more utility based, and focuses its attention on actually changing the way you use CSS.

I cannot put enough emphasis on how using Tailwind actually changes the way you write and organise your CSS.

Tailwind core concept is built around its huge library of css utilities, that are totally composable as well as very verbose and easy to understand. With Tailwind, here is how a simple button might look like:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

You immediately get the idea, and that's the beauty of it. It's blue, changes colour on hover, has some bold white text with some padding and rounded edges. As simple as that.

But this would not be enough to make Tailwind the powerful tool that it is today. Its true strength comes from its configuration system, that will generate a whole custom and unique CSS framework for you and you only. Let's go through that.

It all starts with a configuration file

As many custom tools that are fully customisable, everything starts with a configuration file. Introducing your very first tailwind.config.js. Inside it, a lot of magic is gonna happen. Here you can:

  • Select exactly what you want to have in your build
  • Create your own custom theme (colors, fonts, spacing ...)
  • Add your own/some community plugins
  • Add some CSS purging
  • Add a custom prefix
  • Customise Tailwind experimental features

The whole point of that configuration is that you only get what you use in your build. No huge CSS file with 90% of unused CSS. That time is over ! Tailwind will even take care of some CSS purging for you if you enable it !

A typical configuration file can look like this:

module.exports = {
  purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
  theme: {
    extend: {
      colors: {
        "my-custom-color": `#fdd332`,
        ...
      },
    },
  },
  variants: {
    borderWidth: ["responsive", "last", "hover", "focus"],
    borderRadius: ["last", "first", "responsive", "hover", "focus"],
    backgroundColor: ["responsive", "hover", "focus", "disabled"],
    textColor: ["responsive", "hover", "focus", "disabled"],
    cursor: ["responsive", "hover", "focus", "disabled"],
  },
  plugins: [require("@tailwindcss/custom-forms")],
};

The most importants parts are the theme section as well as the variants sections.

The theme is where you will be able to either override the default attributes of a Tailwind configuration (which you can find here). You can also extend the default theme with additional attributes. The variant is where you will define which variants are usable with which attributes.

It even includes functions to reference other configuration values might you want to use them elsewhere ! Neat ! Here is an example of a manual way you can deduce a hue of another colour using (some plugins can do that for you directly).

module.exports = {
 theme: {
    backgroundColor: (theme) => ({
      ...theme('colors'),
      'gray-900-hue': `rgba(${hexToRgb(theme('colors.gray.900')).r},${hexToRgb(theme('colors.gray.900')).g},${hexToRgb(theme('colors.gray.900')).b}, 0.98)`,
    }),
  },
}

What about CSS outside HTML ?

I can already see you coming: "but what about using Tailwind outside the HTML scope ? What if I want to use it in my CSS/SASS/LESS and override some other properties I have there ?" Well, Tailwind got you covered for that as well, with the extraction system.

Remember the button shown earlier ? What about defining it like this:

.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700;
}

Interesting isn't it ? That is the power of CSS extraction. This way, you can combine your new/existing classes with the power of Tailwind, keeping it simple, maintable and unified.

The best way to make the most out of Tailwind

Tailwind is a simple idea, that when used right will basically erase the usual hassles of CSS writing from your existence. Remember having to maintain some unreadable, duplicated, messy CSS ? Tailwind offers the possibility to never have to face that anymore.

Like all frameworks, Tailwind aims to unify and standardise, and that is something that CSS is in need of. When using Tailwind, ones objective should be to:

  • NEVER write non Tailwind-based CSS
  • Having an elegant mix of inline-HTML attributes for unique elements, and classes using extraction for more generic elements

Follow those 2 simples rules as much as you can, you will be able to create a project that ANY other person that has used Tailwind in the past will be able to work on instantaneously. No hassle to understand where things are, configuration is centralised, things are standardised. The dream ❤️.

Interesting resources

For a closing note, here are some notable resources that are definitely interesting to check-out, as they make Tailwind an even more powerful beast.

Awesome TailwindCSS - A great starting point. Perfect for finding new Add-ons, reading some material, finding some examples ...

Tailwind IntelliSense - Absolutely necessary add-on for VsCode. It will help you get used to the many attributes Tailwind has to offer as well as streamlining your development more.

TailwindUI - TailwindUI is a good place to go if you're looking for some components/inspiration/examples of interesting Tailwind usage !

Tailwind CSSCSS