Getting Started With TailwindCSS

Tailwind is a utility-based css framework that inverts a lot of assumptions about how CSS classes should work, and forms a very viable alternative to something like Bootstrap. So let’s take a deeper look.

I’ve been using beta versions of Tailwind on a few projects of various scales for a couple of years. But version 1.0 finally came out recently and I thought it was worth talking about it.

So What Is Tailwind?

Tailwind is a utility-based CSS framework, intended to facilitate rapid development of modern web applications. The key is that it’s utility based. Rather than one preset “big” class that sets a bunch of properties you will add multiple classes, each of which set (approximately) one.

How does it differ from Bootstrap?

Just as an aside here, when I talk about “Bootstrap” you can consider that shorthand for a bunch of competing libraries — Bootstrap, Foundation, Bulma, and more.

Getting Started With Tailwind — The Wrong Way

Like other CSS frameworks there’s an easy way and a right way. To look at and have a quick poke at Tailwind’s features, the wrong way is perfectly fine for now.

mkdir tailwind-demo
cd tailwind-demo
touch index.html
code .
<!DOCTYPE html>
<html>
<head>
<title>Tailwind</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>

<h1>Tailwind Demo</h1>
<p>This is a tailwind demo.</p>
</body>
</html>

Let’s start with colour

Tailwind is a utility-based framework. That means it starts with no components or assumptions. There’s no such thing as a “button” class.

<h1 class="text-blue-500">Tailwind Demo</h1>
<h1 class="text-blue-100">Tailwind Demo</h1>
<h1 class="text-blue-300">Tailwind Demo</h1>
<h1 class="text-blue-500">Tailwind Demo</h1>
<h1 class="text-blue-700">Tailwind Demo</h1>
<h1 class="text-blue-900">Tailwind Demo</h1>
<body class="bg-blue-100">
<h1 class="text-blue-500">Tailwind Demo</h1>
<p class="text-blue-900">This is a tailwind demo.</p>
</body>

Colours in Tailwind — They’re not all available

There’s a saying that constraints breed creativity. By limiting your palette to this defined set of colours you get a cohesive visual style that is easy to work with. I worked on a site once that had approximately 2,700 different colours defined in its stylesheet. This was in part because of use of things like lighten() and darken() which multiplied out already piecemeal colour choices for shadows, etc.

Margins and spacing

So this is heading in the right direction now. But there’s more to life than colours. We also have it crammed into the top left, and the H1 isn’t any bigger than the paragraph text.

<body class="bg-blue-100 m-5">
<h1 class="text-blue-500 mb-3 text-xl">Tailwind Demo</h1>
<p class="text-blue-900">This is a tailwind demo.</p>
</body>

Putting the pieces together

Let’s make a button. We’ll just make a Bootstrap copy.

<button class="py-2 px-4 rounded bg-green-600 text-white">
Success
</button>

Hover States

Thankfully Tailwind supports these hovers easily. All we have to do is add hover:bg-green-700 hover:text-green-100 and it will change on hover like Bootstrap. To be honest I don’t think the Bootstrap one changes text colour, I just wanted to demonstrate how you can do two things, or even invert colours.

<button class="py-2 w-64 px-6 bg-indigo-600 text-indigo-100 
text-right font-hairline mr-5 border-indigo-800 border-r-8
hover:border-indigo-900">
Next section &raquo;
</button>

Installing Tailwind — The Hard Way

Ok, this really isn’t rocket surgery. Tailwind is not too hard to use the hard way. Tailwind doesn’t use a typical less or scss pre-processor, but actually a post-processor called PostCSS. Thankfully Parcel itself does all the heavy lifting.

module.exports = {
plugins: [
require('tailwindcss')
]
}
@tailwind base;
@tailwind components;
@tailwind utilities;
<link rel="stylesheet" type="text/css" href="./style.css">
.button {
@apply py-2 w-64 px-6 bg-indigo-600 text-indigo-100 text-right font-hairline mt-10 border-indigo-800 border-r-8;
}
.button:hover {
@apply border-indigo-900;
}
.button {
@apply py-2 w-64 px-6 text-right font-hairline mt-10 border-r-8;
}
.button-indigo {
@apply bg-indigo-600 text-indigo-100 border-indigo-800;
}
.button-indigo:hover {
@apply border-indigo-900;
}
.button-green {
@apply bg-green-600 text-green-100 border-green-800;
}
.button-green:hover {
@apply border-green-900;
}

Weird Flex, But Ok

A Bootstrap-style 12 column grid is a bit naff these days and naturally Tailwind supports flexbox layouts.

<div class="flex bg-orange-300 p-5">
<div class="w-1/5 bg-orange-700 text-orange-100 p-5">
LeftNav
</div>
<div class="flex-1 bg-orange-400 text-orange-800 p-5"> <h2 class="text-orange-700 text-lg mb-5">Tailwind Layout</h2> <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius natus iure suscipit repellendus quis nostrum, debitis repudiandae, laudantium fuga quas voluptatum illum, expedita eum sint ratione vero sunt! Id, sunt!</p> <p class="mb-3">Deserunt nihil quo numquam ut eaque voluptates rem, eveniet explicabo culpa fuga dolorum amet fugit eos! Enim sint dolorum inventore at perferendis.</p>

</div>
</div>

Responsive Design

Tailwind is built as a mobile-first framework, and that means the viewport is assumed to be mobile and breakpoints are hit as needed as the interface scales up. Not down. This means you should develop truly mobile first. Don’t make a desktop application and then try to make it work on mobile. Seriously. Don’t.

- <div class="flex bg-orange-300 p-5">
- <div class="w-1/5 bg-orange-700 text-orange-100 p-5">
+ <div class="flex flex-col bg-orange-300 p-5">
+ <div class="flex-1 bg-orange-700 text-orange-100 p-5">
<div class="flex flex-col md:flex-row bg-orange-300 p-5">
<div class="flex-1 md:flex-none md:w-1/5 lg:w-1/6 xl:w-1/8
bg-orange-700 text-orange-100 p-5">

Some General Advice

Tailwind works fine with frameworks like React. If you are using React, dealing with dynamic classes is a shit. There’s a simple but useful library unhelpfully called classnames that helps build your class lists, and is very useful for Tailwind.

Conclusion

Tailwind isn’t going to be suitable for every project, and that’s fine. If you’re doing something quick and dirty where appearance doesn’t matter, or that’s time-limited, you’ll get more out of the pre-existing components for Bootstrap.

Senior Web Developer based in Bangkok, Thailand. Javascript, Web and Blockchain Developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store