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

JavaScript Module Loaders

Module loaders are libraries that can handle loading modules using the different formats for further processing or executing

JavaScript Build Tools

This is a confusing and blurring category in JavaScript tooling ecosystem

A Complete Guide to JavaScript Tooling

Want to become a productive JavaScript developer? Confused no more with a complete guide to JavaScript tooling systems

JavaScript Task Runners

Grunt and Gulp are two popular tools to automate repetitive, mundane, painful and time-consuming tasks effectively