How to Install Tailwind CSS v1.0

Tailwind CSS has become my favorite CSS frameworks to reach for lately. The focus of the framework is utility-first which means adding classes to HTML elements to style it collectively. This guide will teach you how to install the new beta version 1.0 of Tailwind CSS coming soon.

This post is also the kick off of a new series titled Let’s Build: With Tailwind CSS. In this series, I’ll be creating UI components and projects using Tailwind CSS exclusively. We’ll harness the framework and possibly extend it to create awesome looking UI from scratch. We may even clone other popular UI as an example use case too.

Why Tailwind CSS?

I hated the concept of purely functional/atomic/utility CSS at first but have now grown to love it. I originally hated it because of how cluttered it felt writing so many class names inside my HTML. It felt as though I was writing inline styles almost (you kind of are…).

The beauty of the Tailwind CSS approach I found in these bullet points:

Less opinionated (Tailwind has its defaults but you can customize everything)

Configurable

Hardly ever need to hunt/find CSS in your stack

Hardly ever need to write repeated CSS in your stack.

Scaling is just easier

Prototyping is just easier

Less jumping between markup and CSS files

Installation

Installing Tailwind is quite easy. You will need some sort of build process to compile down the code. It leverages PostCSS so something like Gulp, Wepback, Laravel Mix, or insert your favorite build tool name should suffice.

In this guide, I’ll be making use of Adam Wathan’s webpacker starter kit for Tailwind. I’ll amend it to work with the new beta release.

Inside tailwind.css replace the @import preflight; line with @import base;

Run yarn dev

What’s next?

I’d love to hear from you about what components/projects/designs you might like to see built with Tailwind CSS. My goal is to start small and scale along the way. We’ll start down to the component level and work our way up to larger pages/views. From there we can extend Tailwind and learn what more is possible with the framework thanks to plugins and optional configurations. I’ll also show you how to install it on your favorite framework of choice.