4 Reasons why I start using Tailwind CSS in every project

I used to use UI frameworks a lot — Bootstrap, Material UI, Ant Design… Yes they are convenient and I only need to write a few lines of CSS in a whole project.

But the problem is: you can see a website is clearly built upon Bootstrap, like many others out there. UI frameworks have components so strictly defined that it’s hard to customize them to the unique styles of my website. They make my website doesn’t look like “mine”, but coming out of a popular template that everyone is using.

Once I picked up Tailwind CSS last year, I started using it in every project of mine, and reconstructing existing projects with it. Although it’s a CSS framework, it allows me to write customizable styles as simple as those UI framworks, while acting the same as coding in plain CSS. Here are 4 reasons why I love using it and why it’s so easy to use.

Easy inline styling

Instead of writing blocks of plain CSS and adding annoying selectors to HTML elements, Tailwind lets you add styles on HTML elements directly. It’s like style attribute in JSX but with a more concise syntax.

For example, a styled avatar in regular HTML and CSS is

<img src="image.png">
img {
  width: 6px,
  height: 6px,
  border-radius: 100%
}

whereas in Tailwind is

<img src="image.png" class="w-6 h-6 rounded-full">

Predefined property value

Tailwind sets the value of a CSS property in several predefined formats so that your UI follows a certain pattern. This avoids inconsistent property value over different components, and saves time for you to define global patterns for the properties.

Highly customizable

Although Tailwind has predefined property value, it allows you to customize your own property value.

// tailwind.config.js
module.exports = {
  theme: {
    borderRadius: {
      'none': '0',
      DEFAULT: '4px',
      'large': '12px'
    }
  }
}

A more common use case is to globally define a style class, like the CSS selector. This saves you from writing the same style for different components, reusing it in various scenarios.

// index.css
@layer component {
  .hover-transition {
    @apply transition duration-200 ease-out;
  }
}
// myComponent.html
<div class="w-10 h-6 hover-transition"> hover me </div>

Handle responsiveness easily

When CSS first comes out, it didn’t incorporate responsive styles for different screen sizes. Media queries were not introduced to CSS until 2012, yet its syntax is still tedious for devs to write a whole responsive application.

button {
  hidden
}
@media screen and (min-width: 768px) {
  button {
    width: 12px
  }
@media screen and (min-width: 1024px) {
  button {
    width: 16px
  }
}

Tailwind incorporates easy responsive styling to just add a prefix of screen size in front of each property.

<button class="hidden md:w-12 lg:w-16"> hit me </button>

Makes life much easier, right?