Tailwind CSS: What It Is, Why Use It & Examples

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 CSS 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:

• what Tailwind CSS is
  • what benefits it offers
  • why use Tailwind over other CSS frameworks
• Tailwind CSS examples

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:

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.

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.

Image Source

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

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.

Image Source

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

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.

Image Source

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

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

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.

Image Source

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

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.