Introduction to Tailwind CSS

What is Tailwind CSS?

Tailwind CSS is the most popular utility-first CSS framework in the world for rapidly building custom user interfaces for the web. It is a highly customizable collection of low-level CSS utility classes written in PostCSS destined to be customized using JavaScript.

Adding Tailwind CSS to your project via a package manager

There are multiple ways of implementing Tailwind CSS into your project, and even though you can do it really fast via a CDN, the most recommended method is to use a package manager and then make full use of the configuration possibilities via PostCSS using building tools.

npm init
npm install tailwindcss --save

Adding Tailwind to your CSS

Now that you have installed Tailwind CSS using NPM, you will need to use the custom @tailwind directive and inject Tailwind’s base, components, and utilities styles into your main CSS file.

@tailwind base;

@tailwind components;

@tailwind utilities;

Creating the configuration file and process your CSS with Tailwind

The recommended way of developing with Tailwind CSS is to have a configuration file that you will edit along the way based on your needs. You will be able to easily add and modify the default utility classes from Tailwind. Practically, it will be very easy to change fonts, colors, sizings, spacings and literally anything.

npx tailwindcss init
// tailwind.config.js
module.exports = {
future: {},
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
plugins: [
// ...
require('tailwindcss'),
require('autoprefixer'),
// ...
]

Processing your CSS with Tailwind

Later in this tutorial I will show you how to automatically watch for changes in your CSS file, but for now you can just run the following command to compile the main.css file and create a new file called output.css, which will be the actual CSS file that will be included in the HTML files:

npx tailwindcss build main.css -o output.css

Including Tailwind CSS into your HTML templates

Create an HTML file called index.html in your root project directory and make sure to include the output.css CSS file inside the head tag of your template:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS</title>
<link rel="stylesheet" href="output.css">
</head>
<body>
<!-- Build awesome user interfaces using Tailwind CSS starting from here -->
</body>
</html>

Building a responsive hero section using the utility-first classes from Tailwind

Let’s now get started by building a hero section using the utility-first classes from Tailwind CSS. The goal is to create a navigation bar with a logo, menu items and some call to action buttons and then follow up with a hero section.

<header>
<nav>
<!-- Logo will come here -->

<!-- Menu items in the center here -->

<!-- CTA buttons will come here -->
</nav>
</header>
<nav class=”flex items-center justify-between p-6 container mx-auto”>
  • items-center - using flexbox it will vertically align the elements within the nav HTML tag.
  • p-6 — adds padding to all directions for the <nav> element
  • container — sets the max-width of an element to match the min-width of the current breakpoint (by default 1280px max-width)
  • mx-auto — applies an margin:auto, thus centering the nav element horizontally
<a href=”#”>
<svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 64"><defs><style>.cls-1{fill:#319795;}.cls-2,.cls-4{fill:#2a344f;}.cls-2{opacity:0.32;isolation:isolate;}.cls-3{opacity:0.16;}</style></defs><title>logo</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Group_16" data-name="Group 16"><g id="Group_15" data-name="Group 15"><g id="Group_12" data-name="Group 12"><path id="Path_35" data-name="Path 35" class="cls-1" d="M53.52,1.87l-22,5.39a1.61,1.61,0,0,1-1.23-.21L19.89.25a1.57,1.57,0,0,0-1.3-.19l-18,5.3A.77.77,0,0,0,0,6.09V16.87L18.59,11.4a1.57,1.57,0,0,1,1.3.19l10.4,6.79a1.53,1.53,0,0,0,1.23.21L54,13.09V2.23a.39.39,0,0,0-.39-.38Z"></path><path id="Path_36" data-name="Path 36" class="cls-1" d="M40.25,27.84l-8.73,2.1a1.57,1.57,0,0,1-1.23-.21l-10.4-6.8a.37.37,0,0,0-.53.11.31.31,0,0,0-.07.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.57,1.57,0,0,0,1.23.2l9.23-2.21A6.86,6.86,0,0,0,46,32.45v-.21a4.62,4.62,0,0,0-4.68-4.55A4.93,4.93,0,0,0,40.25,27.84Z"></path><path id="Path_37" data-name="Path 37" class="cls-1" d="M40.25,50.52l-8.73,2.1a1.61,1.61,0,0,1-1.23-.21l-10.4-6.8a.38.38,0,0,0-.53.1.35.35,0,0,0-.07.21V56.15a.75.75,0,0,0,.34.63l10.66,7a1.53,1.53,0,0,0,1.23.21l9.23-2.22A6.84,6.84,0,0,0,46,55.13v-.21a4.62,4.62,0,0,0-4.68-4.55A4.39,4.39,0,0,0,40.25,50.52Z"></path></g><path id="Path_38" data-name="Path 38" class="cls-2" d="M30.86,41.29V30a1.63,1.63,0,0,0,.66,0L35.28,29l2.2,10.8-6,1.46A1.47,1.47,0,0,1,30.86,41.29Zm8.82,9.33-8.16,2a1.63,1.63,0,0,1-.66,0V64a1.63,1.63,0,0,0,.66,0l10.36-2.54Zm-8.82-32a1.63,1.63,0,0,0,.66,0l1.57-.38L30.86,7.28Z"></path><g id="Group_13" data-name="Group 13" class="cls-3"><path id="Path_39" data-name="Path 39" class="cls-4" d="M19.29,11.36a1.82,1.82,0,0,1,.6.23l10.4,6.8a1.41,1.41,0,0,0,.57.22V7.27a1.41,1.41,0,0,1-.57-.22L19.89.25a1.82,1.82,0,0,0-.6-.23Z"></path><path id="Path_40" data-name="Path 40" class="cls-4" d="M30.86,52.64a1.67,1.67,0,0,1-.57-.23l-10.4-6.8a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V56.15a.75.75,0,0,0,.34.63l10.66,7a1.73,1.73,0,0,0,.57.22Z"></path><path id="Path_41" data-name="Path 41" class="cls-4" d="M19.89,22.93a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.58,1.58,0,0,0,.57.22V30a1.43,1.43,0,0,1-.57-.23Z"></path></g></g></g></g></g></svg>
</a>
<div class="text-lg text-gray-600 hidden lg:flex">
<a href="#" class="block mt-4 lg:inline-block text-teal-600 lg:mt-0 mr-10">
Home
</a>
<a href="#" class="block mt-4 lg:inline-block hover:text-gray-700 lg:mt-0 mr-10">
Services
</a>
<a href="#" class="block mt-4 lg:inline-block hover:text-gray-700 lg:mt-0 mr-10">
Portfolio
</a>
<a href="#" class="block hover:text-gray-700 mt-4 lg:inline-block lg:mt-0 mr-10">
Company
</a>
<a href="#" class="block hover:text-gray-700 mt-4 lg:inline-block lg:mt-0">
Contact
</a>
</div>
  • text-gray-600 - applies a gray color to the text within the element (starts from text-gray-100 to text-gray-900, 100 being the lightest color and 900 being the darkest)
  • hidden - applies display: none; to the element hiding it
  • lg:flex - this is the first responsive class in this tutorial, we will cover it later, but for now all you need to know is that it applies display:flex for larger screens
  • mt-4 — applies margin to the top part of the element
  • lg:inline-block — for larger devices the element will become an inline element, making the menu items stay on one row
  • hover:text-gray-700 — when hovering over the element, it will make the color of the menu item slightly darker
  • lg:mt-0 — for larger devices don’t apply the top margin (makes sense, because on mobile the menu items will be shown one under each other, whereas on larger devices they’re all on one row)
  • mr-10 — applies a margin to the right side of the element to properly space the menu items between each other
<div class="flex items-center">
<div class="mr-5 lg:mr-0">
<button class="py-2 px-6 rounded-md text-gray-600 hover:text-gray-700 text-lg">Sign in</button>
<button class="py-2 px-6 bg-teal-500 hover:bg-teal-600 rounded-md text-white text-lg">Sign up</button>
</div>
<div class="block lg:hidden">
<button class="flex items-center px-4 py-3 border rounded text-teal-500 border-teal-500 focus:outline-none">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
</div>
<header>
<nav class="flex items-center justify-between p-6 container mx-auto">
<!-- Logo -->
<svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 64">
<defs>
<style>
.cls-1 {
fill: #319795;
}

.cls-2,
.cls-4 {
fill: #2a344f;
}

.cls-2 {
opacity: 0.32;
isolation: isolate;
}

.cls-3 {
opacity: 0.16;
}
</style>
</defs>
<title>logo</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<g id="Group_16" data-name="Group 16">
<g id="Group_15" data-name="Group 15">
<g id="Group_12" data-name="Group 12">
<path id="Path_35" data-name="Path 35" class="cls-1"
d="M53.52,1.87l-22,5.39a1.61,1.61,0,0,1-1.23-.21L19.89.25a1.57,1.57,0,0,0-1.3-.19l-18,5.3A.77.77,0,0,0,0,6.09V16.87L18.59,11.4a1.57,1.57,0,0,1,1.3.19l10.4,6.79a1.53,1.53,0,0,0,1.23.21L54,13.09V2.23a.39.39,0,0,0-.39-.38Z">
</path>
<path id="Path_36" data-name="Path 36" class="cls-1"
d="M40.25,27.84l-8.73,2.1a1.57,1.57,0,0,1-1.23-.21l-10.4-6.8a.37.37,0,0,0-.53.11.31.31,0,0,0-.07.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.57,1.57,0,0,0,1.23.2l9.23-2.21A6.86,6.86,0,0,0,46,32.45v-.21a4.62,4.62,0,0,0-4.68-4.55A4.93,4.93,0,0,0,40.25,27.84Z">
</path>
<path id="Path_37" data-name="Path 37" class="cls-1"
d="M40.25,50.52l-8.73,2.1a1.61,1.61,0,0,1-1.23-.21l-10.4-6.8a.38.38,0,0,0-.53.1.35.35,0,0,0-.07.21V56.15a.75.75,0,0,0,.34.63l10.66,7a1.53,1.53,0,0,0,1.23.21l9.23-2.22A6.84,6.84,0,0,0,46,55.13v-.21a4.62,4.62,0,0,0-4.68-4.55A4.39,4.39,0,0,0,40.25,50.52Z">
</path>
</g>
<path id="Path_38" data-name="Path 38" class="cls-2"
d="M30.86,41.29V30a1.63,1.63,0,0,0,.66,0L35.28,29l2.2,10.8-6,1.46A1.47,1.47,0,0,1,30.86,41.29Zm8.82,9.33-8.16,2a1.63,1.63,0,0,1-.66,0V64a1.63,1.63,0,0,0,.66,0l10.36-2.54Zm-8.82-32a1.63,1.63,0,0,0,.66,0l1.57-.38L30.86,7.28Z">
</path>
<g id="Group_13" data-name="Group 13" class="cls-3">
<path id="Path_39" data-name="Path 39" class="cls-4"
d="M19.29,11.36a1.82,1.82,0,0,1,.6.23l10.4,6.8a1.41,1.41,0,0,0,.57.22V7.27a1.41,1.41,0,0,1-.57-.22L19.89.25a1.82,1.82,0,0,0-.6-.23Z">
</path>
<path id="Path_40" data-name="Path 40" class="cls-4"
d="M30.86,52.64a1.67,1.67,0,0,1-.57-.23l-10.4-6.8a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V56.15a.75.75,0,0,0,.34.63l10.66,7a1.73,1.73,0,0,0,.57.22Z">
</path>
<path id="Path_41" data-name="Path 41" class="cls-4"
d="M19.89,22.93a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.58,1.58,0,0,0,.57.22V30a1.43,1.43,0,0,1-.57-.23Z">
</path>
</g>
</g>
</g>
</g>
</g>
</svg>

<!-- Menu items -->
<div class="text-lg text-gray-600 hidden lg:flex">
<a href="#" class="block mt-4 lg:inline-block text-teal-600 lg:mt-0 mr-10">
Home
</a>
<a href="#" class="block mt-4 lg:inline-block hover:text-gray-700 lg:mt-0 mr-10">
Services
</a>
<a href="#" class="block mt-4 lg:inline-block hover:text-gray-700 lg:mt-0 mr-10">
Portfolio
</a>
<a href="#" class="block hover:text-gray-700 mt-4 lg:inline-block lg:mt-0 mr-10">
Company
</a>
<a href="#" class="block hover:text-gray-700 mt-4 lg:inline-block lg:mt-0">
Contact
</a>
</div>

<!-- CTA and Hamburger icon -->
<div class="flex items-center">
<div class="mr-5 lg:mr-0">
<button class="py-2 px-6 rounded-md text-gray-600 hover:text-gray-700 text-lg">Sign in</button>
<button class="py-2 px-6 bg-teal-500 hover:bg-teal-600 rounded-md text-white text-lg">Sign up</button>
</div>
<div class="block lg:hidden">
<button
class="flex items-center px-4 py-3 border rounded text-teal-500 border-teal-500 focus:outline-none">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
</div>
</nav>
</header>

Building the hero section

Now that we’re done with the navigation bar, let’s start building the hero section. It will have two parts: the description part on the left and the sign up form on the right. Let’s start with the wrapper elements, as always:

<main class="mt-12 lg:mt-32">
<section class="container mx-auto px-6">
<!-- hero section content goes here -->
</section>
</main>
<div class="w-full lg:flex items-center">
<div class="w-full lg:w-1/2">
<!-- hero section description goes here -->
</div>
<div class="w-full lg:w-1/2 lg:pl-24">
<!-- sign-up form goes here -->
</div>
</div>
<h2 class="text-md lg:text-2xl text-gray-600">Market Intelligence Solutions to</h2>
<h1 class="text-5xl lg:text-6xl font-bold text-teal-600 mb-2 lg:mb-6">Win your market</h1>
<p class="text-md lg:text-xl font-light text-gray-800 mb-8">Powerful analytics tools for your business. See the exact keywords for which your competitors rank in organic search and the amount of traffic driven by each of them.</p>

Adding a sign-up form

All we have left to do now to finish the hero section is to create a sign-up form. We will require the user to add her/his full name, email address and the size of her/his company in terms of employees.

<form action="#" class="bg-gray-100 shadow-sm rounded-md p-8">
<div class="mb-6">
<label for="name" class="mb-3 block text-gray-700">Full name:</label>
<input type="text" id="name" class="bg-white rounded-md border border-gray-200 p-3 focus:outline-none w-full" placeholder="John Doe" required>
</div>
<div class="mb-6">
<label for="email" class="mb-3 block text-gray-700">Email address:</label>
<input type="email" id="email" class="bg-white rounded-md border border-gray-200 p-3 focus:outline-none w-full" placeholder="john.doe@company.com" required>
</div>
<div class="mb-8">
<label for="company_size" class="mb-3 block text-gray-700">Company size:</label>
<select id="company_size" class="bg-white rounded-md border border-gray-200 p-3 focus:outline-none w-full" required>
<option value="">Select an option</option>
<option value="1">1-10</option>
<option value="2">10-50</option>
<option value="3">50-100</option>
<option value="4">100+</option>
</select>
</div>
<button type="submit" class="py-3 px-12 bg-teal-500 hover:bg-teal-600 mr-5 rounded-md text-white text-lg focus:outline-none w-full">Request Demo</button>
</form>
  • border - adds a 1px border width to the element
  • border-gray-200 - makes the border color a lighter shade of gray
  • bg-white - adds a white background to the element

Customize fonts, colors and add extra classes using the configuration file

Although the default set of classes from Tailwind CSS offer a great variety of styling options, most likely you will need to customize project design properties, such as the font, colors, sizings, spacing, container width and many more.

<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
module.exports = {
purge: [],
theme: {
fontFamily: {
sans: ['Nunito', 'sans-serif'],
display: ['Nunito', 'sans-serif'],
body: ['Nunito', 'sans-serif']
},
extend: {}
},
variants: {},
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
npx tailwindcss build main.css -o output.css

Extending Tailwind CSS with custom colors

Most projects come with certain requirements in terms of branding colors, meaning that the default colors provided by Tailwind CSS may not be enough for your needs. In this case, it is best to use the extend method provided by the Tailwind configuration file.

extend: {
colors: {
primary: '#EA755E',
secondary: '#BD675F'
}
}

Conclusion and summary

I hope this tutorial helped you get a good understanding of what Tailwind CSS is, how it works and the advantages it can have over other CSS Frameworks when it comes to building user interfaces fast and efficiently.

https://www.buymeacoffee.com/papareact
https://www.buymeacoffee.com/papareact

Python Fullstack Developer | Blogger | Web Developer | Mentor. Let's Connect on IG: @Darshu.codes