What is Tailwind CSS? Why use it?

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

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

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework designed to make it faster and easier to create apps. You can use utility classes to control layout, colors, spacing, typography, shadows, and more to create completely custom component designs—without leaving the HTML or writing a single line of custom CSS.

For example, let's say you want to create a button with a fixed height, horizontal padding, a black background color, rounded edges, and a white, bold font. Here's the HTML you'd use:

Buy now

HTML contains 6 utility classes. Let's analyze each class below:

1. h-10 : This class sets the button to a fixed height of 10 units.
2. px-6 : This class sets the horizontal padding of the button to 6 units.
3. font-semibold : This class sets the font weight of the button to semibold.
4. rounded-md : This class sets the border radius of the button so that the corners are rounded.
5. bg-black : This class sets the background color of the button to black.
6. text-white : This class sets the button's text color to white.

As you might expect, getting started with Tailwind CSS mostly involves getting familiar with its utility classes. But once you get the hang of it, you'll be able to quickly and consistently create custom components like the button below.

Now that we have a better understanding of the Tailwind CSS framework, let's take a look at some of the benefits of using it.

Benefits of Tailwind CSS

There are many benefits to using a CSS framework like Tailwind. Here are the main ones.

1. You write less custom CSS . With Tailwind, you style elements by applying built-in classes directly to your HTML. Using utility classes this way, you can build custom designs without writing CSS.
2. Keep CSS files small . Without a framework like Tailwind, you would have to keep writing CSS as you added new features and components. As a result, your CSS files would continue to grow and become heavier. By using utilities like Tailwind's flexbox and padding utilities, most styles are reusable so you rarely need to write new CSS.
3. You don't have to pick class names . When you use Tailwind, you're picking classes from a predefined design system. That means you don't have to worry about picking the 'perfect' class name for certain styles and elements, or remembering complicated names like sidebar-inner-wrapper.
4. You can make safer changes . With the traditional approach, if you make changes to CSS, you could break something on your site. Unlike CSS, widget classes in your HTML are local. That means you can change them without worrying about breaking anything else on your site.

Why use Tailwind CSS?

Now, you might be wondering why use Tailwind instead of other CSS frameworks? Tailwind CSS is a low-level framework. That means, unlike other CSS frameworks like Bootstrap and Materialize, Tailwind doesn't provide fully styled components like buttons, drop-down lists, and navbars. Instead, it provides utility classes so you can create your own reusable components.

For that reason, it offers more flexibility and control over the look and feel of your application than other CSS frameworks. This can allow you to create a more unique website.

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

Tailwind CSS Example

Tailwind provides UI components and templates or 'examples' to help you get started building your app quickly.

Tailwind has a repository of examples for landing pages, feature sections, newsletter signup 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.

Another repository is created by community members and is open source. We will focus on examples from this repository below.

Tailwind CSS Forms

To allow users to sign up for your newsletter, you can use Tailwind to create an email signup form.

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

 Subscribe 

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} widget classes, among others.

Tip : Add some 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 allow users to search for apps based on keywords, you can use Tailwind to create a search bar.

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

 Search   

Tip : Use the w-full widget 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.

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

Your Big Idea

It's fast, flexible, and reliable — with zero-runtime.

Tailwind CSS works by scanning all of your HTML

It's fast, flexible, and reliable — with zero-runtime.

React, Vue, and HTML

Accessible, interactive examples for React and Vue powered by Headless UI, plus vanilla HTML if you'd rather write any necessary JS yourself.

Note : This component is created without JS Library, but you will need the following JavaScript code to enable the slider.

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 (slides) to prevent them from growing or shrinking.

Tailwind CSS Pricing

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

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

Intro

$19 / Month

For most businesses that want to optimize web queries.

 All limited links Own analytics platform Chat support Optimize hashtags Unlimited users  Choose plan  

Note : This code will only create the first container for the 'Intro' package. To create containers for the 'Base', 'Popular' and 'Enterprise' packages, you will have to copy this code, swapping out the text for each package name and price.

Tip : Add the 'hover:' modifier before the class name like 'bg-gray-200' to apply that widget class conditionally (i.e. to have the container only change its background color when the user hovers over it).

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

Use Tailwind CSS to speed up your coding process

Tailwind CSS helps you write and maintain app code faster. Using this utility framework, you don't need to write custom CSS to style your app. Instead, you can use utility classes to control padding, margins, colors, fonts, shadows, and more in your app.

It may take you a while to get used to these utility classes, but once you do, you'll be able to create and maintain apps faster than ever.

Marvin Fry

Update 13 June 2025