A High-Level Introduction To Tailwind CSS
By: Andy Crouch
Tags: Front End Development, CSS, HTML, React, Frontend

The last few projects I have built have been either React or Gatsby based. When setting up these projects I wanted a fast and simple way to apply a consistent and maintainable style system for them. There are different ways to define styles when building components, from inline styles and CSS stylesheets through to CSS-in-JS. On top of these foundations has grown a wide array of libraries and tools to help developers define and manage their project styles. From Sass which extends the CSS language through to frameworks such as Bootstrap. I could have gone with any of these for my projects but I didn’t.

Instead, I have gone to a happy place by using Tailwind CSS.

First, Some History

CSS is easy to write and even easier to allow to grow into a mess. On small projects with limited resources, it is not so much of a problem but when the codebase grows it can be hard to keep your CSS under control. It’s a problem that seems to become linearly harder based on the number of developers on the project. There have been many attempts from projects trying to govern how CSS should be written and applied in code. It would seem that any developer that has written on the subject has at least 3 suggestions about how to solve the problems that CSS causes.

The most logical of the previously suggested approaches was BEM. This stands for Block, Element and Modifier. This is a great way to structure your HTML and CSS but it requires you to be consistent and does not provide much in the way of tooling to help you. This brings us to the biggest issue with almost all styling approaches, humans. On large projects knowledge transfer is hard, developers will struggle to maintain convention-based code that a compiler will ignore. You will end up with a lot of duplicate code and implementing a consistent UI/UX style becomes way more work than it should be.

What Is Tailwind?

Tailwind CSS is a utility first CSS framework which aims to provide an API for your design system.

The main difference between Tailwind and other frameworks is that it provides a default set of helper style classes and an adaptable configuration approach but does not provide ready to use components. Instead, by working at a lower level, you apply the helper classes directly to your elements to quickly build your own components. Tailwind is completely unopinionated and its configuration is highly flexible to allow you to build and include only the features that you need.

Getting Started

Tailwind has brilliant documentation. Probably some of the best I have seen across both Open Source and commercial products. Follow their installation guide for your project type to get Tailwind set up and ready to use.

Once installed, you will have created a tailwind.css.js configuration file which sits at the root of your project. This will be used to configure the styles and elements to include at build time.

You will also need to include the following in your CSS file. These are placeholders for the build process which will generate the required styles and inject them into your CSS file.

@tailwind base; @tailwind components; @tailwind utilities;

Using Tailwind

Tailwinds utility classes can be used directly within the HTML as shown on the snippet below