Get Started with Tailwind CSS in 15 Minutes

Tailwind CSS is a CSS framework that gives you utility classes instead of pre-built components.

One of my favorite things I've found after using Tailwind:

You'll never need to override CSS framework classes again.

The home page has a really cool example of how to work with Tailwind:

Building Real Things

This article is focused on taking a look at Tailwind features. If you would like to skip ahead and jump straight into building things with Tailwind, look at these articles:

• Recreate the Spotify Album Page
• R ecreate Google.com Home Page
• Recreate Twitter Creation Modal

A Quick Example - Building a Card

Here's an example of a Bootstrap card vs a Tailwind card component. Warning: This may look very weird and you may dismiss Tailwind after this example. Give it some more time and a few practice examples and you'll start to see the power of utility classes and the idea of composition over inheritance .

A Bootstrap card :

<div>
  <div>

        <h5>Card Title</h5>
        <p>Content goes here</p>

    </div>
</div>

While the Bootstrap card is easy to create, it isn't the easiest to customize to our own applications. You'll need to override this .card class and maybe even regretfully use !important .

Let's see Tailwind Card:

<div>
  <h5>My Title</h5>
  <p>Content goes here</p>
</div>

We are using many utility classes to achieve a card. While this looks like a little more work upfront, the biggest benefit is that you can customize to your style quickly and easily .

Here's the CodePen . Here's a breakdown of the classes for the card:

background: #fff
border-radius: 0.25rem
0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
border-width: 1px
padding: 1.5rem
width: 16rem

Here's the classes for the title:

font-size: 1.875rem
font-weight: 700
margin-bottom: .75rem
margin-top: 0

Here's the classes for the content:

color: #4a5568
font-size: .875rem

Tailwind CSS is an investment. If you want to write your CSS and design your apps faster, you're gonna have to put in the time to learn the classes; this is the same as any technology that you want to benefit from.

Will this make my HTML too busy?

This can be seen as writing inline styles. There are many strategies to moving these classes out of your HTML and making them reusable. Here are some tactics for cleaning up our Tailwind classes:

• Using Sass and moving our classes out of HTML
• Using JS components (React/Vue) and only having to write classes once

Here's an example of using the Tailwind @apply function to clean up your HTML:

.btn {
  @apply font-bold py-2 px-4 rounded;
}

.btn-blue {
  @apply bg-blue-500 text-white;
}

.btn-blue:hover {
  @apply bg-blue-700;
}

An approach that I personally like is keeping the classes in the template and then finding ways to make that template reusable. React components is a good example of this.

We'll talk about that more later. For now, we need to focus on how we can use Tailwind to build things.

What is Tailwind CSS?

Now that we've seen a quick example, let's dig deeper. Tailwind CSS is a CSS framework that may be different than what you've used in the past. When most people think of CSS frameworks, they usually think of the most popular one, Bootstrap , or any of the very popular ones like Foundation or Bulma .

Tailwind is a different type of framework. Instead of pre-built components, Tailwind provides utility classes.

Here are some types of classes Tailwind provides

When we talk about utility classes, we mean that we have a multitude of classes that we can use. These will link direclty to the Tailwind docs.

• Background Color
• Padding
• Flexbox
• Grid
• Font Size

The Tailwind docs are very good at helping us find what we need. You'll find yourself browsing the docs often while you are learning the classes. A tip is to use the keyboard shortcut for / to focus the search bar.

The Benefits of Tailwind

You may be wondering, "why should we use a utility class framework that will make our HTML seem busier?"

Most CSS frameworks do too much.

When using Bootstrap or something similar, we'll have a lot pre-built classes like card , navbar , and more. As soon as we want to customize those things for our own projects, we'll have to write custom CSS and try to override the base styles.

This can lead to busy CSS where you are writing styles to undo styles!

Tailwind gives us a "use what you need" approach.

This benefit will be more apparent the more time you spend with the framework. Let's go over some benefits and build a few things.

Bundle Size

Tailwind on its own is a large CSS framework. This is because of how many utility classes come with it.

The big benefit is when we use a tool called Purgecss to control our file size . Purgecss will look at our HTML and find the Tailwind classes that are being used. Any classes that we don't use will be removed from our final CSS file/bundle.

We can remove all the classes that we aren't using. Our CSS could be as small as 13kb!

Easy to Customize

Tailwind allows us to customize everything about our classes. We can change the color palette, size of fonts, paddings, responsiveness, and more.

We can create a tailwind.config.js and write our config changes in there. Anything in this file will override the Tailwind default config .

// Example `tailwind.config.js` file

module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}

Quick to Responsive

We can write in responsiveness using the utlity classes Tailwind provides. I was never a fan of writing my own CSS to create responsive breakpoints.

With Tailwind, we can write our responsive styles by prefixing the utility classes with:

sm
md
lg
xl

Let's say we want a box to be blue at larger screens and red at smaller screens. We start with mobile and add the class for blue for larger screens:

<div>
    <p>i am red on small and medium devices</p>

    <p>i am blue on large and extra large devices</p>
</div>

Super Fast Prototyping (if you know CSS well)

My favorite feature of Tailwind is how fast I can create great designs in browser. Tailwind won't give you perfect designs. It just gives you the tools to quickly create. I've never considered myself a designer and I don't use tools like Figma. I'd rather jump right into the code and design in browser.

You need to know your CSS well if you want to use Tailwind.

Using Tailwind will make sure you know your CSS classes as it doesn't hide any of CSS behind component classes. If you use a Bootstrap card , you may not know what goes into that card class. When you use Tailwind, you'll know exactly what CSS you're getting.

We recreated a few things we found around the web with Tailwind. Check out those articles to see us quickly prototype with Tailwind.

• Recreate the Spotify Album Page
• R ecreate Google.com Home Page
• Recreate Twitter Creation Modal

Tailwind CSS is a different way of looking at your CSS. It provides a great foundation to quickly create any type of design you want.

It may take some getting used to, but I believe it's worth the effort.

You'll never need to override CSS framework classes again.

Stay tuned as we'll be building more things with Tailwind!

Like this article? Follow @chrisoncode on Twitter