In this blog post, we are going to be discovering how to use the popular Tailwind CSS framework, by creating a simple Coffee Shop landing page.
You can find the finished code here if you need it:
Project images download:
And also a YouTube link too if you prefer video:
The Tailwind CSS library has been seeing a huge rise in popularity recently, and with good reason.
It is quick and easy to get started with, and enables you to create a great looking website or app in a short time.
So, how does it work? First let's take a look at the popular Bootstrap 4 framework as a comparision:
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
With Bootstrap we also have some utility classes available, but generally we make use of it's pre-built "component" structure. We are provided with elements and wrappers, combined with the CSS classes to create these components.
Tailwind on the other hand takes a full "utility first" approach. This means we have no enforced HTML structure, we take our existing HTML, and add one or more classes to each individual element.
We can style and layout our app without leaving our HTML markup. Want to set a container to use Flexbox? Just add a class:
<ul class="flex">
And we use as many of these "utility" classes as we would like to style our elements, each one with a name relating to the CSS property it adds, eg:
<p class="text-white p-4 text-2xl">Tailwind Coffee</p>
Is the same as adding the following CSS manually:
p {
color: #fff;
padding: 1rem;
font-size: 1.5rem;
}
Now we know a little about how Tailwind works, let's begin our project.
This project is intended to be a quickstart to get you going fast. We will not be covering every CSS class Tailwind has to offer. This would be crazy, and take forever. Instead, it is designed to give you just enough to find your way.
I would also recommend having open https://tailwindcss.com/docs/installation/ as you go through the course. The sidebar covers all of the available classes we have to use.
- Create a new project folder in your desired location (documents/desktop etc)- named tailwind coffee
- Open up your preferred text editor, I use Visual Studio Code
- Open up your empty project folder in your text editor (file > open, or drag folder into editor)
- Create a new file in our project folder: index.html (file > new file)
Now we are ready to create our basic HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind Coffee</title>
</head>
<body>
</body>
</html>
All of the code we write from now will also be in this same file.
Starting at the top of the project we will create the header section, navbar and main image which you see here:
We are also going to need some images to use too. You can download your own, or use the same as me: using this link:
- Download project images from https://chrisdixon.io/p/downloads
- Unzip & add images folder to your project folder
Add the following code to the top of the body section:
<header>
<p>Tailwind Coffee</p>
<nav>
<ul>
<li>home</li>
<li>store</li>
<li>locations</li>
</ul>
</nav>
</header>
<img src="images/background.jpg" alt="coffee shop background" />
Double click the index.html file to open in the browser.
Not the best looking navbar, right? Let's fix this by adding some Tailwind.
Head over to https://tailwindcss.com/docs/installation/, where you will find the following CDN link:
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
Add this into the head section of our project:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Tailwind CDN Link: -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.4/tailwind.min.css"
/>
<title>Tailwind Coffee</title>
</head>
Back over to the browser, we see a change. Bullets are removed from our list items and the fonts have changed.
This means the tailwind "preflight" has taken effect. Preflight is Tailwind's base CSS which gives us a blank canvas to begin with by removing default margins, unstyling headings and lists etc. It is also build on top of the popular normalize.css file.
Now we can add some Tailwind utility classes to improve the styling, to begin, I am going to be styling "mobile first". I would recomment shrinking the browser to a narrow size.
We can apply general stying we want throughtout the page in a parent container, such as the body:
<body class="font-serif text-xl text-gray-200 antialiased">
Here we set the font-family, size, color and also font smoothing properties.
Then our initial mobile first styling for the header content:
<!-- display type flex, items centered, text/background colors and padding -->
<!-- py-6 = padding value of 6 (1.5rem) on y axis (top/bottom) -->
<!-- px-2 - padding value of 2 (0.5rem) on x axis (left/right) -->
<header
class="flex flex-col items-center bg-gray-600 text-gray-200 py-6 px-2"
>
<!-- pb-4 = padding value of 4 (1rem) on bottom only -->
<!-- font weight medium, font size 1.5rem -->
<p class="pb-4 font-medium text-2xl">Tailwind Coffee</p>
<nav>
<!-- set flex container and a spacing value
between child element of 4 (1rem) on the x axis -->
<ul class="flex space-x-4">
<li>home</li>
<li>store</li>
<li>locations</li>
</ul>
</nav>
</header>
Our header should now look like this:
Stretch the browser to be a wider size (over 768px), and we can change the layout of the header for larger devices.
To do this, Tailwind provides some default responsive sizes:
/* Small (sm) */
@media (min-width: 640px) { /* ... */ }
/* Medium (md) */
@media (min-width: 768px) { /* ... */ }
/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }
/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }
We can use these prefixes of sm, md, lg and xl before any utility class, to only apply the styling on that size and over.
For example, our header is currently set to the flex direction of column (flex-col), we can change it to be row on medium devices by adding md:flex-row:
<header
class="flex flex-col md:flex-row justify-between items-center bg-gray-600 text-gray-200 py-6 px-2"
>
We also add justify-between above to add the spacing between the site title and links for the md size and over.
So, to recap, the header will be column on all sizes, until the browser reaches 768px, then the layout will switch to row.
The site title and links are not currently lined up ono the larger view, because we have some padding on the bottom of the title from the small screen view.
Let's override this for the md size:
<!-- add md:pb-0 -->
<p class="pb-4 md:pb-0 font-medium text-2xl">Tailwind Coffee</p>
You should now have a nice looking responsive header like this:
Now we understand a bit more about how Tailwind works, the rest of the page should make more sense (add code below main image):
<main class="md:grid grid-cols-3 gap-4 text-gray-200 text-center mt-4">
<article class="bg-gray-600">
<img
src="images/beans.jpg"
alt="shop coffee beans"
class="rounded-t w-full"
/>
<div class="md:flex flex-col py-8">
<h3 class="font-medium text-2xl pb-12">Our coffee beans</h3>
<p>Bulk bags of our responsibly sourced beans</p>
</div>
</article>
<article class="bg-gray-600">
<img
src="images/locations.jpg"
alt="shop coffee beans"
class="rounded-t w-full"
/>
<div class="md:flex flex-col py-8 px-2">
<h3 class="font-medium text-2xl pb-12">Our locations</h3>
<p>50 locations to choose from</p>
</div>
</article>
<article class="bg-gray-600">
<img
src="images/process.jpg"
alt="shop coffee beans"
class="rounded-t w-full"
/>
<div class="md:flex flex-col py-8 px-2">
<h3 class="font-medium text-2xl pb-12">Learn about the process</h3>
<p>Jump into the art behind making great coffee</p>
</div>
</article>
<article class="bg-gray-600">
<img
src="images/coffee.jpg"
alt="shop coffee beans"
class="rounded-t w-full"
/>
<div class="md:flex flex-col py-8 px-2">
<h3 class="font-medium text-2xl pb-12">Our coffee</h3>
<p>Discover our wide range of blends</p>
</div>
</article>
<article class="bg-gray-600">
<img
src="images/machines.jpg"
alt="shop coffee beans"
class="rounded-t w-full"
/>
<div class="md:flex flex-col py-8 px-2">
<h3 class="font-medium text-2xl pb-12">Shop coffee machines</h3>
<p>Make the perfect coffee at home</p>
</div>
</article>
<article class="bg-gray-600">
<img
src="images/mugs.jpg"
alt="shop coffee beans"
class="rounded-t w-full"
/>
<div class="md:flex flex-col py-8 px-2">
<h3 class="font-medium text-2xl pb-12">Branded mugs</h3>
<p>Check out all of our merch</p>
</div>
</article>
</main>
Here we create a main wrapper, on smaller devices, the content will naturally stack vertically.
Then we set the display to be grid on medium size devices and above. 3 equal grid columns, and a grid gap of 4 (1 rem).
This places all of the sections (article elements) into a grid formation, and these are made up of a image, title and subtitle, using some familiar utility classes.
You should now have an area below the header which looks like this:
I hope this has given you a good insight of how to get going with Tailwind.
This is just scratching the surface of what it has to offer, there is many more utilities available, installation methods, customisation options etc which can make Tailwind truly flexible and customisable for your next project.
Top comments (0)