Today I’m going to show you how to get started with Tailwind CSS, a highly customizable CSS framework that you can use to quickly build your own web pages and components. It works by providing a list of classes which you can use to control every visual aspect of your page.

In This Tutorial

Here’s a breakdown of what’s to come.

• What is Tailwind CSS?
• A Simple Example Using the CDN Version
• Advanced Functionality Using the NPM Version
• Customizing Tailwind CSS

What is Tailwind CSS?

In short, Tailwind is a CSS framework, but it’s different from the likes of Bootstrap and Foundation. It provides only the raw basics of what you need to style your own web pages, such as margins, sizes, positioning, colors, that sort of thing. You won’t find off-the-shelf components such as buttons and navbars–it’s up to you to use Tailwind to build your own components. This gives immense freedom where many modern frameworks only restrict what you build; there’s no need to override anything!

A Simple Example Using the CDN Version

To get a better idea of how this all works, let’s go ahead and build a simple demo using Tailwind.

There are two ways to use Tailwind; either with the CDN version which is hosted for us, or via a manager like NPM. Using the CDN is easiest, though it restricts us in certain ways:

• You can’t customize Tailwind’s default theme
• You can’t use any directives like @apply, @variants, etc.
• You can’t enable features like group-hover
• You can’t install third-party plugins

If none of these bother you, feel free to grab the CDN link and insert it into your page head.

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

With that done, let’s kick things off by adding a container, with another div inside it.

<div class="container">
    <div class="">
        <figure>
            <img src="" alt=""/>
        </figure>
    </div>
</div>

We’re not adding any classes just yet, but feel free to populate this with dummy content.

Let’s add some Tailwind classes. For example:

• A margin on the container, along the x-axis, with a value of auto. That looks like this: mx-auto
• And how about some padding on the top and bottom? Same idea: py-4. The 4 here is not a px value, it’s actually a multiplier of the base value, which is 2.5rem.
• Next: a width, which we notate as this: w-3/4. Again, this value needs to be interpreted. It means three quarters of a rem, which is .75rem.
• Flexbox utilities are also available, so let’s add some to the nested div within our container. md:flex items-center means that on medium screens we use display: flex; and we dictate that the flex items are centered.

With one or two more utility classes into the mix, we end up with this:

<div class="container mx-auto py-4 w-3/4">
    <div class="md:flex items-center">
        <figure class="md:flex-shrink-0">
            <img class="md:w-64" src="undraw_online_banking_7jy4.svg" alt="Banking">
        </figure>
    </div>
</div>

To visualize what we have a little better, take a look at the Github repo.

To take this demo a step further, take a look at the video version of the tutorial embedded above. You’ll learn advanced functionality using the NPM version and how to customize the Tailwind CSS framework that you use.

Conclusion

Controlling the basic layout of your markup using nothing but utility classes is really intuitive. There are certainly those who’ll argue it doesn’t separate form from structure, but if you find it helps you build web pages more quickly then there’s certainly nothing wrong with that!

#css #web-development #tailwind