A High Level Introduction To Tailwind CSS

Photo: Unsplash - Branko Stancevic

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:

<div class="container mx-auto border border-blue-500">
  <h1 class="text-2xl font-bold text-red-400">Tailwind CSS</h1>
  <button class="w-16 text-white bg-blue-500 rounded shadow-lg hover:bg-yellow-500 hover:text-black ">
    Click Me
  </button>
</div>

So what are we doing here? Lets first look at the div definition.

<div class="container mx-auto border border-blue-500">

We are defining a div element to act as a container and we are applying the container utility class. This sets the div’s width to a fixed size based on the current screen breakpoint. To centre the fixed size container, we apply the mx-auto utility class. m prefixed utility classes control margin’s and the x means we want to control the horizontal margins. By using the auto modifier we are providing an equal margin on the left and the right of the container so that it becomes centred in the total screen area. Finally, we are applying a full border to the container using the border utility class and specifying the colour of the border using the border-blue-500 utility class.

<h1 class="text-2xl font-bold text-red-400">Tailwind CSS</h1>

Tailwind provides several utility classes that make working with text simple. In the h1 snippet above we are using the text prefixed utility classes to increase the size of the text to xx-large and to make the text red. The –500 modifier is used to specify the shade of red to apply based on your configuration. The colour pallet used in Tailwind can be fully customised and provides 9 shades for each colour which can be accessed by the -100 to -900 modifiers. The font prefixed modifier is used to make the text bold.

<button class="w-16 text-white bg-blue-500 rounded shadow-lg hover:bg-yellow-500 hover:text-black ">
   Click Me
</button>

Tailwind is designed to support responsiveness out of the box and fully supports variants as a way to work with pseudo-classes. This can be seen in the button snippet above. We start by using the w utility class to specify a width for the button. Tailwind provides a large number of predefined widths and heights (using the h prefixed modifiers). We then define the background and text colours using the text and bg-blue-500 class variants. These are the standard styles applied to the element. To change the colours of the background and text when we hover over the button element we define secondary colour classes and prefix them with the hover variant modifier.

The Tailwind documents show what a broad selection of utility classes they provide.

Really Useful Resources For Tailwind

The following are a bunch of really useful rearouses and links I found when picking up and building things with Tailwind:

• Tailwind CSS Documentation - Excellent quality documentation that explains everything in great detail.
• Simple Tailwind CSS Playground - A really simple playground with intellisense to allow you to trail styling elements with Tailwind.
• Tailwind CSS Cheat Sheet - A condensed cheat sheet that provides a great quick reference for the utility classes.
• Tailwind Grid Generator - A useful utility to generate Flex-based grids.
• Tailwind Components - A site full of components developed in HTML and Tailwind that you can use in your project or for reference.
• Tailwind Toolbox - A second site of ready to go templates and components.

Wrapping Up

Tailwind is quick to pick up and it is so intuitive that when you switch back to a project that is not using it, you really miss it. It is not an infallible system and I am sure that some projects may still struggle with their CSS by using it. But, by mixing it with other tools available (such as Emotion or Storybook), developing a design system has become a lot easier to implement and manage. I will be pushing for Tailwind at the start of all projects going forward so I can stay in my happy place.

If you have any questions or tips in using Tailwind then let me know via twitter or email.