Introduction to Tailwind CSS
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
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.
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:
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
Here’s a simple boilerplate HTML file that includes Tailwind from unpkg:
<!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>
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
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
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
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
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>
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
Similar to size, the naming pattern is just
property-value, so a right float becomes
justify-content: center; becomes
<!-- 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>
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-mono and have a group of fonts taken care of.
Instead of the 0-64 units we’ve been using,
font-size (shortened to
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>
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.
<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>
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.