Getting Started with Tailwind CSS

There are two main types of CSS framework. One is based around components —a group that includes frameworks such as Bootstrap, Foundation, and Bulma. The other type of CSS framework is based around utilities —a group that includes the likes of Tachyons, Tailwind CSS, and Windi CSS.

For many years, component-based frameworks were the de facto standard for building websites quickly and easily. But all this magic comes with a price. Without serious customization, sites built with such frameworks look similar to each other. And customization is a real pain in the neck for anyone who wants to build something more complex and/or creative. Component-based styles are easy to implement, but inflexible and confined to certain boundaries. Solving specificity issues while trying to override the default styles of a particular framework isn’t a fun and productive job.

“Utility-first” frameworks were created to solve this problem. A utility-first framework is built with low-level functionality in mind. Utility classes offer much more power and flexibility than component classes.

Utility-first frameworks provide the following advantages:

• Utility classes operate at a low level. This means we have more control and flexibility over how we apply them—a concept that’s similar to the power and flexibility offered by a low-level language like C or C++, in contrast to high-level languages such as JavaScript or PHP.
• Utility classes are easy to customize, so we can build any design.
• A utility-first approach scales well. It’s great for managing and maintaining large projects, because we only have to maintain HTML files, instead of a large CSS codebase. It’s already used with success by big sites like GitHub, Heroku, Kickstarter, Twitch, and Segment.
• Utility classes can be adopted to any design.
• Utility classes are completely customizable and extensible. It’s easier to build unique, custom website designs without fighting with unwanted styles.
• Utility classes allow for much easier implementation of responsive design patterns.
• Utility classes have consistent styles, which gives us a ready-to-use design system. We can also create our own design system if we need to.
• With utility classes, we can still extract common, repetitive patterns into custom, reusable components. But in contrast to predefined components, custom components will be exactly what we need.

In summary, we can say that a utility-first framework gives us balance between the concrete and the abstract.

Now that we’ve seen how useful utility-first frameworks can be, it’s time to pick one and see what it can do for us in action. In this tutorial series, we’ll explore Tailwind CSS, which is the most popular of the utility-first frameworks.

What Is Tailwind?

Tailwind is a set of low-level, reusable utility classes that can be used like building blocks to create virtually any design we can imagine. This utility-first framework covers the most important CSS properties, but it can be easily extended in a variety of ways. It can be used either for rapid prototyping or for creating full-blown designs.

Tailwind has great documentation, covering every class utility in detail and showing the ways it can be customized. There’s also a playground where you can try out your ideas. You can also check out Tailwind’s screencasts if you prefer to learn by watching.

Tailwind CSS 3.0 (the version we’ll use throughout the series) supports the latest stable versions of Chrome, Firefox, Edge, and Safari. There’s no support for any version of IE, including IE11.

What Is a Utility Class?

As we already know, Tailwind’s main characteristic is the use of utility classes. But what is a utility class?

While a component class is a collection of predefined CSS settings applied in an opinionated fashion, a utility class is mostly a single CSS property or behavior that we can use freely in a predictable way. This gives us the freedom to combine, mix and match different settings depending on our requirements. We have greater control over each element’s appearance. We can change and fine-tune an element’s appearance much more effortlessly with utility classes.

In Bootstrap, we create a button by using predefined component classes, as in the following example:

Here, the btn and btn-success are the so-called component classes. Each one of them represents a collection of predefined CSS settings.

In Tailwind, we create a button by using utility classes:

Here, py-2, px-4, bg-green-500, and so on, are the so-called utility classes, and each one of them represents just a single CSS setting. To create the button, we use multiple utilities—which we put together like the pieces of a puzzle in order to get the whole picture.

The buttons looks quite similar, but they’re created in different ways.

We’ve covered the basic difference between component and utility classes, but let’s now take an even closer look at utility classes.

In Tailwind, the CSS font-style: italic is represented by the italic utility class.

Here are some more examples:

• text-align: right becomes text-right
• font-weight: 700 becomes font-bold
• border-radius: 0.25rem becomes rounded
• width: 0.5rem becomes w-2
• padding: 1.5rem becomes p-6

And here’s how classes are applied in practice. Let’s say we want to make a paragraph bold and italic. We do it this way in CSS:

To do the same in Tailwind, we add the font-bold and italic classes directly to the HTML element:

In Tailwind, we can also apply classes based on an element’s states, such as hover, focus, and so on. For example, if we want the above paragraph to be italic only on mouse hover, we can write the class like this: hover:italic.

As you can see, Tailwind utility classes are mostly self-explanatory. We can often imagine how the styled element looks by just reading the classes. Some class names are heavily abbreviated, admittedly, but once we’ve grasped the pattern and had a bit of practice with them, they’re easy to remember and recall.

What a Design System Is, and How It Can Help Us

As Tailwind offers a sort of design system, it will be useful to say few words about what a design system is and how it can facilitate the design process.

In simple terms, a design system is a set of rules and conventions for how a design should be built. It includes predefined rules about sizes, colors, text, and so on. Traditionally, when we build a design we need to make multiple choices about things like:

• the size of the design elements (text, images, etc.)
• the colors and color variations
• the fonts and other typographic features

… and so on.

Making a decision for every small part of a design can lead to choice paralysis and inconsistency. It’s tedious and error-prone. It would be much easier if we first established a design system with already predefined options that are tested and proven to work. We can then just select from the existing, limited set of options and combine them to produce the desired outcome.

This is actually what Tailwind gives us—a well-crafted design system that we can use to speed up, smooth, and facilitate our design-building process.

Up and Running with Tailwind

The official documentation describes a bunch of different ways to install Tailwind. In this tutorial, we’ll use the simplest one—which involves including Tailwind in our projects via the Play CDN option. So just create an HTML file and put the following content in it:

This is the starting template we’ll build upon throughout the rest of the tutorial. We’ll also include a Font Awesome link that we’ll use for the icons in our design.

Exploring Tailwind Basics

There are four main factors involved in every web design project:

• Layout. It all starts with a blueprint. This defines how the whitespace and elements of our design are organized and ordered.
• Typography. This includes all text content, including messages.
• Colors. This brings life to a design and defines a design’s mood and brand.
• Imagery. This includes the visuals of a design, such as icons, images, illustrations, and so on.

In the next four sections, we’ll learn more about each one of these factors and see how Tailwind can help us to implement them in the development phase. The aim here is to give you a bird’s-eye view of what classes to look for when you’re working on a particular component. Don’t worry: I’ll go into much more detail for each class when we start exploring a practical example later on in the tutorial.

Layout

In this section, we’ll explore briefly the most commonly used classes for layout composition. We can group classes by their function, as follows:

• Size. This includes width and height utilities for setting an element’s dimensions.
• Space. This includes margin and padding utilities for adding space in our design.
• Position. This includes an element’s positioning and coordinates.
• Borders. This includes various utilities for setting an element’s borders, such as style, width, and radius.
• Display. This includes the way elements are rendered.

In modern CSS, we have also Flexbox and Grid classes for building a layout. We’ll cover only the Flexbox utilities in this tutorial, as they’re much simpler and easier to use for beginners.

When we use Flexbox, we start by creating a flex container by adding a flex class to a parent element. Then we add additional flex classes to configure how the flex items inside the container (direct children) will be displayed. For example, to render flex items vertically as a column, we add a flex-col class along with the flex class:

This is the base for applying flex classes. There are plenty of them in Tailwind, and it would be tedious to explain each one individually. Instead, when we explore a practical example later on, I’ll cover the flex classes we use in that example.

Typography

Now that we have a layout, the next step is to add the content we want to display. This is mostly done by using text. Here are the most commonly used text utilities grouped by function:

• Font. This includes font family, size, style and weight utilities, as well as tracking and leading settings.
• Text. This includes text aligning, color and opacity, decoration and transformation.
• List. This includes list type and position styling.

Colors

We have a layout, and we have text. Now we need to bring life to them by using some colors. Tailwind offers a large, pre-made color palette. Applying a color is super easy. Here are the two most common uses of color:

• Text. To apply a color to text we use the pattern text-[color]-[number]. The number variable defines tints and shades. For example, to make text dark red, we can use a text-red-900 class. To make it light red, we can use text-red-100.
• Background. To use a color as a background, we use the pattern bg-[color]-[number].

Imagery: Icons and Images

The final spice in our design recipe is the visual imagery. Visuals are like salt and spices: a meal isn’t tasty without them. The most commonly used visuals are:

• Icons. These can be based on SVGs or icon fonts. As we saw earlier, we included Font Awesome in our template. To use an icon from, it we use the pattern fas fa-[icon-name]. For example, to use a search icon for a search input, we can use the fas fa-search classes. Notice that fas placed before the icon name means that we use Font Awesome’s solid icons collection, which is free. Font Awesome offers some base styling for its icons, but we can style them with Tailwind’s utilities (for color, size, etc.) as well.
• Images. To style images, we can use a bunch of Tailwind classes, such as width and height, opacity, shadows, borders, filters, and so on.

Building a Blog Starter Template

In this last section, we’ll explore how to build a simple blog starter template from scratch. I won’t go too deeply into the detail of each individual utility class, but I’ll provide enough explanation where it’s needed.

Here’s the final version of the blog template. You can also test it in action in this CodePen demo.

Creating the Header

We’ll build the template from top to bottom, starting with a header. The following image shows what we’re trying to create.

To create the header, put the following code inside the <body> element in the starting template:

Let’s break the header’s code into smaller blocks. First, we’ve wrapped all the content in a container by adding the container class in the wrapping <div> element:

This forces the design to accommodate certain dimensions depending on the current breakpoint. We’ve also centered the design with the mx-auto utility. This sets the left and right margins to auto.

In Tailwind, when x is used after a CSS setting abbreviation (m for margin here), it means that the setting will be applied both on left and right. If y is used instead, it means the setting will be applied both top and bottom.

The reason we create such a container is that, on large screens, the design will be centered and presented in a more compact size, which in my opinion looks much better than a fully-fluid viewport.

The next thing we’ve done is create the header with a <header> element:

We’ve created a flex container and used justify-between and items-center classes to add an equal amount of space between flex items and align them along the center of the container’s cross axis.

We’ve also used the sticky and top-0 classes to make the header fixed to the top when users scroll down, and we’ve set a z-10 class to ensure the header will be always on top.

We’ve added a shade of blue color as a background and some padding for both top and bottom sides of the header.

The first item in the header’s container is the blog’s logo:

It’s combination of a yellow colored wind icon (fas fa-wind) and light blue colored “Tailwind School” text. We’ve made the icon bigger by using Font Awesome’s fa-2x class. The text is made bigger and semibold by using Tailwind’s text-3xl and font-semibold classes respectively.

For the logo’s container, we’ve added a bit of left margin and used the flex-shrink-0 class to prevent the logo from shrinking when the design is resized to smaller viewports.

The second item in the header’s container is the main navigation:

We’ve created it by using a ul element turned into a flex container so we can style its items as horizontal links. We’ve used the overflow-x-hidden class to clip the content within navigation that overflows its left and right bounds. We’ve also added some right margin.

The mr-10 class and the ml-6 (logo) classes use the r for right and l for left abbreviations to set right and left margin respectively. In a similar way, t and b can be used for setting top and bottom sides of an element.

For the navigation’s links, we’ve added some right margin and a small padding to all sides:

When we use a setting like padding without side abbreviation (p-1 here), it’s applied to all sides.

We’ve set the color of links to white, which changes to light blue on hovering. We’ve also used the hover: prefix to achieve that effect.

We’ve styled the active “Home” link by adding a thin yellow border below the text. The border is created with the border-b-2 class, where b is for bottom and 2 is the amount of border thickness.

Creating the Main Content Area

We’re ready to move to the main content, which is placed in two columns. The first is for the list of posts, and the second is for a sidebar containing a search box, a newsletter subscription box, and a menu with post categories. The image below shows what we’re going to build.

To create the content area, put the following code after the closing </header> tag:

This is the code for the posts. Once again, let’s break it into blocks.

First, we’ve created a flex container that will hold the two columns:

Then we’ve used a <main> element with flex flex-col classes to list posts as a first column and a w-2/3 class to size the column to be two thirds of the whole main content width.

We’ve then wrapped each post in an <article> element with a drop shadow effect achieved by using the shadow class:

Then, we’ve added a post image:

We’re using images from Unsplash and applying a hover:opacity-75 class to them, which will lower the image opacity to 75 percent on image hovering.

Next, we’ve created the content area that contains a category heading, a post heading, a byline, a post excerpt, and a link to the full post:

We’ve styled the content area as a flex column.

In the category headings, we’ve made the text small, bold and all caps by applying text-sm font-bold uppercase classes. We’ve also added a bottom border to divide category headings from the post headings.

We’ve made the text of the headings large and bold and applied a serif font.

We’ve also made the link to the full post with all caps and extra small text, and we’ve included a right-arrow icon at the end.

Creating the Side Content Area

To add the second sidebar column, put the following code after the closing <main> tag:

Let’s break it into blocks.

In the code below, we’ve wrapped the sections in an <aside> element taking up one third of the whole main content width:

In the first section, we’ve created a search box:

We’ve used rounded-l-lg (to make the left side of the element with large, rounded borders) and rounded-r-lg (to make the right side of the element with large, rounded borders) to round the <input> and the <button> elements and connect their non-rounded sides smoothly, as they’re one element.

We’ve also used the w-full class for the <input> element to make it resize correctly. To remove the element’s outline for both input and the icon button when they’re focused, we’ve added focus:outline-none class.

In the second section, we’ve created a newsletter subscription box:

We’ve added a <div> element with a gradient background by using bg-gradient-to-b from-red-400 to-red-200 classes. They create a gradient from top to bottom with two red-colored stops.

We’ve added a heading and then created a subscription form for the newsletter. We’ve added a tracking-wider class to the “Subscribe” button to add more space between the letters.

In the third section, we’ve created a menu with post categories by using an unordered list. I’m sure you already can figure out by yourself what each of the applied classes does here:

Creating the Newsletter Form Section

The next thing in our design is another newsletter form that will remind users to subscribe. The image below shows what it will look like.

To create it, put the following code after the closing </div> tag after the closing </aside> tag:

Here, we’ve again used flex classes to order the elements of the section vertically and center them. In the first <div> element, we’ve added two headings and centered them by using the text-center class.

To connect the input and the button, we’ve used a similar technique to the one in the newsletter form from the main content area: we’ve created a flex container and used rounded-l-lg and rounded-r-lg classes for the <input> and <button> elements respectively.

Creating the Footer

The final piece of our design is the footer. The result we’re aiming for is pictured below.

To create it, put the following code after the last closing </section> tag:

Here, we have three equal-width columns, which we’ve created by using flex flex-wrap classes on the container and a w-1/3 class for each column (<div> element). We’ve used flex-wrap in the container because we want columns to wrap when resized.

We’ve used border-r classes (they add a right border) in the first two columns to add dividers between columns. Also, the white text applied on the container is inherited by all child elements, so we change the text color only where we need it.

Let’s explain the columns one by one. The first column is just an about us paragraph:

The second column offers contact details and social icons, which we’ve created by using <button> elements and Font Awesome icon classes wrapped in an <i> element:

To order them correctly, we’ve used a justify-center class to justify icons along the center of the container’s main axis and a space-x-4 class to add space between items. In fact, the space is just margin added to the child elements behind the scenes. To make the icons squares, we’ve used w-10 (width) and h-10 (height) classes for each one.

You may have noticed that, instead of fas, we’ve used fab here. This represents Font Awesome’s brand icons collection, which is also free.

The third column is a contact form build by using simple <input>, <textarea>, and <button> elements and classes already explained before:

And now we’re done with our blog starter template!

Conclusion

In this introductory tutorial, we learned what Tailwind is and why it’s a great framework to use. We also learned how to use Tailwind utility classes in a project and how to build the main elements of a web design—layout, typography, colors, and imagery.

We now have all the basic skills needed to start building our projects with confidence. Of course, Tailwind has plenty of advanced features that we haven’t covered here. They’ll all be explored in the following tutorials of this series.