Tailwind CSS

Feb 29, 2020 • ☕️ 2 min read

When building large websites, it becomes tedious to write CSS rules from scratch. This is why there are multiple CSS frameworks to help make writing CSS easy, such as Bootstrap, Foundation, Bulma, Pure, Materialize etc.

Tailwind CSS is unlike above frameworks, it doesn’t give us automatically pre-styled components. Rather, it gives us utility classes that help us style our component in certain ways and allows us to build our own classes using these utility classes.

Working with Tailwind CSS is using a set of utility classes that lets you work with exactly what you need. In my opinion, this is a neat way to create user interfaces that are more flexible to developers’ creativity.

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="/img/card-top.jpg" alt="mountains" />
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
    <p class="text-gray-700 text-base">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
  </div>
  <div class="px-6 py-4">
    <span class="inline-block bg-gray-200">#photo</span>
    <span class="inline-block bg-gray-200">#travel</span>
    <span class="inline-block bg-gray-200">#winter</span>
  </div>
</div>

Tailwind comes prepacked with a lot of options and styles for users to choose from, and it packs all these variations to reduce the tendency to write your own custom CSS. No more tabbing back and forth between HTML and style sheets in your editor, no more going back to check and see what you named that other element.

Tailwind also removes unused CSS with PurgeCSS, a tool for removing unused CSS from your project. It does this by simply comparing the CSS class names available in your template against the class names used and then removing the unused CSS.

Tailwind is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Another advantage of a utility framework is its superior performance with caching due to not busting the cache for small CSS changes. Tailwind has been designed with incredible sensible defaults to make your designs look good with modern web best-practices.

Since Tailwind is a PostCSS plugin, there’s nothing stopping you from using it with Sass, Less, Stylus, or other preprocessors, just like you can with other PostCSS plugins like Autoprefixer.

We need to find and apply the right balance between the concrete and abstract. A low-level CSS framework like Tailwind offers such a balance.

When writing Tailwind CSS, you always have to write lots of classes, which makes your codebase (HTML) look busy and sometimes difficult to read. If you prefer keeping your code neat, you may want to consider writing custom CSS or use any other CSS framework.

Reading More

Become a Fullstack JavaScript Developer, Part 6: The Monorepo

Many companies are adopting monorepo but the decision to use it or not is quite tricky

Type Safety in JavaScript

Static type checkers and object validators are just incomplete solutions to the unsafe dynamic nature of JavaScript

How CSS Works Under the Hood

Some of the most fundamental concepts which control how CSS is applied to HTML and how conflicts are resolved

Cracking The Frontend Interview, Part 1: Overview

What to focus technically when preparing for the frontend developer interview