When coding an application from scratch, you want it to reflect your unique brand, be responsive on any device, and be easy to write and maintain — and those are probably just a few items on your wishlist.

By building with Tailwind CSS, you can check these items off your list. Tailwind CSS is a framework for quickly building and customizing applications without writing custom CSS.

To understand why over 200,000 active websites on the internet use Tailwind CSS, let’s cover:

For example, let’s say you want to create a button that has a fixed height, horizontal padding, black background color, rounded edges, and white, semi-bolded font. Here’s the HTML you’d use:

 
<button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">Buy now</button>

The HTML contains six utility classes. Let’s break down each one below:

  • h-10:  This class sets the button to a fixed height of 10 units.
  • px-6: This class sets the horizontal padding of the button to 6 units.
  • font-semibold: This class sets the font weight of the button to semibold.
  • rounded-md: This class sets the border radius of the button so it has rounded corners.
  • bg-black: This class sets the background color of the button to black.
  • text-white: This class sets the text color of the button to white.

As you might have guessed, the learning curve when using Tailwind CSS primarily consists of familiarizing yourself with its utility classes. But once you do, you’ll be able to quickly and consistently create custom components like the button below.

Buy Now button with rounded edges and black background created using Tailwind CSS utility classes

Now that we understand the Tailwind CSS framework better, let’s look at some of the benefits of using it.

Benefits of Tailwind CSS

There are many benefits of using a CSS framework like Tailwind. Below are the major ones.

  • You write less custom CSS. With Tailwind, you style elements by applying pre-existing classes directly in your HTML. By using utility classes in this way, you can build custom designs without writing CSS.
  • You keep CSS files small. Without a framework like Tailwind, you have to keep writing CSS as you add new features and components. ASa result, your CSS files continue to grow and get heavier. By using utilities like Tailwind’s flexbox and padding utilities, most styles are reusable so you rarely need to write new CSS.
  • You don’t have to invent class names. When Tailwind, you’re choosing classes from a pre-defined design system. That means you don’t need to agonize over picking the “perfect” class names for certain styles and components, or remember complicated ones like sidebar-inner-wrapper.
  • You can make safer changes. With the traditional approach, if you make changes to CSS, you may break something across your site. Unlike CSS, utility classes in your HTML are local. That means you can change them without worrying about breaking something else on your site.

Why Tailwind CSS?

Now you might be wondering why use Tailwind over other CSS frameworks? Tailwind CSS is a low-level framework. Meaning, unlike other CSS frameworks like Bootstrap and Materialize, Tailwind doesn’t offer fully styled components like buttons, dropdowns, and navbars. Instead, it offers utility classes so you can create your own reusable components.

For that reason, it provides a lot more flexibility and control over what your application looks like than other CSS frameworks. This can enable you to create a more unique site.

To learn more about what Tailwind CSS is, what benefits it offers, and why you should use it, check out this video:

Tailwind CSS Examples

Tailwind offers UI components and templates, or “examples,” to help you start building your application quickly.

There’s a repository created by Tailwind that includes examples of landing page heroes, feature sections, newsletter sign up forms, tables, modal windows, checkout forms, shopping carts, and more. You can get the code for most or all of these examples for a one-time package fee.

The other repository is created by community members and is open-source.  We’re going to focus on examples from this repository below.

Tailwind CSS Form

To enable users to subscribe to your newsletter, you can use Tailwind to create an email opt-in form.

Tailwind CSS email opt-in form example with input field side by side to Subscribe button

Image Source

To create a simple email opt-in form like the one shown above, you can use the following code:

 
<div>
<form class="m-4 flex">
<input class="rounded-l-lg p-4 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white" placeholder="your@mail.com"/>
<button class="px-8 rounded-r-lg bg-yellow-400 text-gray-800 font-bold p-4 uppercase border-yellow-500 border-t border-b border-r">Subscribe</button>
</form>
</div>

To customize the border, background color, text color, and other aspects of this form, you can change the border-{style}, bg-{color}, and text-{color} utility classes, among others.

Pro tip: Add a number to the border-{color},bg-{color}, and text-{color} utility classes to use a shade of Tailwind's default color palette

Tailwind CSS Search Bar

To enable users to search your application based on a keyword, you can use Tailwind to create a search bar.

Tailwind CSS search bar example with icon and submit button

Image Source

To create a search bar with an icon and Submit button like the one shown above, you can use the following code:

 
<div class="max-w-2xl mx-auto">
<form class="flex items-center">
<label for="simple-search" class="sr-only">Search</label>
<div class="relative w-full">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
</div>
<input type="text" id="simple-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" required>
</div>
<button type="submit" class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></button>
</form>
</div>

Pro tip: Use the w-full utility class to set the width of the search field to 100%. 

Tailwind CSS Slider

To slide through multiple elements and images, you can use Tailwind to create a slider or carousel component.

Tailwind CSS slider example rotating three colorful slides

Image Source

To create a slider like the one shown above, you can use the following HTML:

 
<div class="h-screen w-full overflow-hidden flex flex-nowrap text-center" id="slider">
<div class="bg-blue-600 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center">
<h2 class="text-4xl max-w-md">Your Big Ideia</h2>
<p class="max-w-md">It's fast, flexible, and reliable — with zero-runtime.</p>
</div>
<div class="bg-pink-400 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center">
<h2 class="text-4xl max-w-md">Tailwind CSS works by scanning all of your HTML</h2>
<p class="max-w-md">It's fast, flexible, and reliable — with zero-runtime.</p>
</div>
<div class="bg-teal-500 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center">
<h2 class="text-4xl max-w-md">React, Vue, and HTML</h2>
<p class="max-w-md">Accessible, interactive examples for React and Vue powered by Headless UI, plus vanilla HTML if you’d rather write any necessary JS yourself.</p>
</div>
</div>

Note: This component was made without JS Library, but you will need the following JavaScript to trigger the slider.

 
<script>
document.addEventListener('DOMContentLoaded', () => {
const slider = document.querySelector('#slider');
setTimeout(function moveSlide() {
const max = slider.scrollWidth - slider.clientWidth;
const left = slider.clientWidth;

if (max === slider.scrollLeft) {
slider.scrollTo({left: 0, behavior: 'smooth'})
} else {
slider.scrollBy({left, behavior: 'smooth'})
}

setTimeout(moveSlide, 2000)
}, 2000)

})
</script>

Pro tip: Add the flex-nowrap utility class to the parent div to prevent it from wrapping and add the flex-none utility class to the child divs (the slides) to prevent them from growing or shrinking.

Tailwind CSS Pricing Table

To show customers multiple premium plans with different features and prices, you can use Tailwind CSS to create a pricing table.

Tailwind CSS pricing table example detailing four plans

Image Source

To create the “Intro” section of the pricing table like the one shown above, you can use the following code:

 
<section class="bg-white dark:bg-gray-800">
<div class="container px-6 py-8 mx-auto">

<div class="grid gap-6 mt-16 -mx-6 sm:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<div class="px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
<p class="text-lg font-medium text-gray-800 dark:text-gray-100">Intro</p>
<h4 class="mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100">$19 <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
<p class="mt-4 text-gray-500 dark:text-gray-300">For most businesses that want to optimaize web queries.</p>

<div class="mt-8 space-y-8">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>

<span class="mx-4 text-gray-700 dark:text-gray-300">All limited links</span>
</div>

<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>

<span class="mx-4 text-gray-700 dark:text-gray-300">Own analytics platform</span>
</div>

<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>

<span class="mx-4 text-gray-700 dark:text-gray-300">Chat support</span>
</div>

<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>

<span class="mx-4 text-gray-700 dark:text-gray-300">Optimize hashtags</span>
</div>

<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>

<span class="mx-4 text-gray-700 dark:text-gray-300">Unlimited users</span>
</div>
</div>

<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
Choose plan
</button>
</div>


</div>
</div>
</section>

Note: This code will only create the first container for the “Intro” plan. To create the containers for the “Base”, “Popular”, and “Enterprise” plans, you will have to replicate this code, swapping out the text for each plan name and price.  

Pro tip: Add the modifier “hover:” before a class name like “bg-gray-200” to apply that utility class conditionally (ie. so that the container only changes background color when the user hovers over it).

To walk through more examples, like how to build a sidebar with Tailwind CSS, check out this video:

Using Tailwind CSS to Accelerate Your Coding

Tailwind CSS makes it quicker to write and maintain the code of your application. By using this utility-first framework, you don’t have to write custom CSS to style your application. Instead, you can use utility classes to control the padding, margin, color, font, shadow, and more of your application.

There may be a learning curve to familiarize yourself with these utility classes, but once you do, you’ll be able to create and maintain applications faster than ever before.

New Call-to-action

 css introduction

Originally published May 30, 2022 7:00:00 AM, updated May 31 2022

Topics:

Bootstrap & CSS