Tutorial

Introduction to Tailwind CSS

Published on August 13, 2019

Joshua Hall

In this article we’ll be looking into my personal favorite design framework: Tailwind CSS. A completely style-agnostic, utility-based library for creating quick and responsive designs. Tailwind is so simple that once you understand the naming conventions and patterns you can almost guess most of the functionality without needing the documentation.

All of the options introduced here can be explored in more detail in the official docs.

Installation

While there are a few different methods for setting up Tailwind, like Gulp, postCSS, or even their own CLI, the simplest route for getting started for learning’s sake is just be to use the CDN URL from unpkg: https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css.

Or, you can install the library into your project using npm or Yarn:

$ npm i tailwindcss

# or, if Yarn is more your thing:
$ yarn add tailwindcss

Boilerplate

Here’s a simple boilerplate HTML file that includes Tailwind from unpkg:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
  <title>Tailwind CSS</title>
</head>
<body>

</body>
</html>

Colors

The class naming for colors is always the same, element-color-intensity. So a red background becomes bg-red-500, with the number value ranging from 100 to 900. This patterns applies to borders, backgrounds, and text.

Here’s a simple example:

<h1 class="text-blue-400">Hello World</h1>

<p class="text-white bg-indigo-900">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, veniam.</p>

<!-- Border needs to be set before the border-color can be changed -->
<input type="text" class="bg-transparent text-white border border-red-600" placeholder="input...">

Size and Spacing

Width and height, shortened to w and h, can take values from 0 to 64 (with some values missing, which you can check for in the docs or VSCode’s IntelliSense) and a few key words like auto, full for 100%, or screen for 100vw/vh. Width can also use fractions out of 1-6 or out of 12, so we could write 50% like 1/2, 2/4, 3/6, or 6/12.

Spacing works very similarly, just the property, side (shorthand without the dash), then the value. So padding-bottom: 2rem; becomes pb-8, again ranging from 0 to 64 and the side being eiter t,b, l, r, x for right and left, or y for top and bottom.

<div class="bg-green-700 h-16 w-auto mr-10"></div>
<div class="bg-blue-700 h-24 w-4/6 my-16"></div>
<div class="bg-red-700 h-40 w-6/12 mx-auto"></div>
<div class="bg-purple-700 h-56 w-2/12 ml-48"></div>

<div class="border border-white h-40 w-56 mt-10 mx-auto">
  <h1 class="text-white py-16 px-16">I'm a box</h1>
</div>

Layout

Tailwind offers us many of the comforts of standard CSS positioning, like floats, position, and even Flexbox. Using them is almost exactly as you would expect, except that with Flexbox you just need to initialize it with flex first.

Similar to size, the naming pattern is just property-value, so a right float becomes float-right and justify-content: center; becomes justify-center.

<!-- Basic Navbar -->
<nav class="flex justify-between items-center px-16 bg-purple-800 text-white h-24">
  <h1>Title</h1>
  <ul class="flex justify-between w-56">
    <a href="#">
      <li>Link</li>
    </a>
    <a href="#">
      <li>Link</li>
    </a>
    <a href="#">
      <li>Link</li>
    </a>
  </ul>
</nav>

Typography

Besides the standard things we can already do in CSS, Tailwind offers some shortcuts for what would otherwise be very tedious, like adding contingency for our font-family, which we can take care of with just font-sans, font-serif, or font-mono and have a group of fonts taken care of.

Instead of the 0-64 units we’ve been using, font-size (shortened to text) takes xs,sm,base,lx, and xl through 6xl.

Besides those exceptions, most of the text options is CSS are available with the same naming patterns as before.

<p class="text-md font-mono font-bold text-white">Hello World</p>
<p class="text-lg font-sans line-through text-white">Hello World</p>
<p class="text-4xl font-serif text-center text-white">Hello World</p>
<p class="text-6xl font-mono text-right italic font-extrabold text-white">Hello World</p>

Responsiveness

This is where Tailwind really shines, in cutting down on the need for media queries. With these prefixes, we can limit a class to only work above a specific width, with the un-prefixed version, like what we’ve been working with so far, working for everything outside of our range.

sm 640px
md 768px
lg 1024px
xl 1280px

<body class="bg-gray-900 flex flex-col md:flex-row">
  <div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-red-500 sm:bg-purple-800 bg-white"></div>

  <div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-green-800 sm:bg-indigo-300 bg-white"></div>

  <div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-blue-200 sm:bg-teal-600 bg-white"></div>
</body>

Conclusion

Hopefully this was an helpful introduction to this powerful little library. The learning curve for Tailwind is so small and its syntax so consistent that with very little experience you can start creating wonderful designs before even needing to look at the CSS.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the author(s)

See author profile

Category:

Tutorial

Tags:

CSS

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.