Tailwind CSS: the ultimate guide to get started

Updated on

Table of contents:

Tailwind CSS: the ultimate guide to get started

Introduction

I’ve been using Tailwind CSS since 2018 in a plethora of projects. I only wrote a few lines of traditional CSS since then.

Once you get the hang of Tailwind CSS, you can’t go back.

What is Tailwind CSS?

Tailwind CSS is a framework designed around the utility-first philosophy.

Instead of writing classic CSS, it encourages you to combine multiple classes to create the desired appearance.

Tailwind CSS was created back in 2017 by Adam Wathan and Steve Schoger.

Here’s how we used to style buttons since the beginnings:

.btn {
    background-color: blue;
    color: white;
    padding: 1rem;
}

Here’s how Tailwind CSS helps you to do it:

<button class="bg-blue-400 p-4 text-white">
    Click me
</button>

Is Tailwind CSS free?

Yes, Tailwind CSS free is 100% free.

You can even contribute to it yourself on Tailwind CSS’ official repository.

You might have heard about commercial products built around the framework. But these are completely optional, you will never need them.

Tailwind CSS makes you love front-end development

Tailwind CSS comes with the following benefits:

  • Say goodbye to unused styles;
  • You will never end up with 4,394 different color, margin, or z-index values;
  • Don’t bother with best practices that nobody in your team wants to follow anyway.

With that, speed of execution will never be a problem, and you’ll enjoy crafting user interfaces again.

Tailwind CSS

Tailwind CSS VS. Bootstrap 5

In short, Tailwind CSS is a utility-first CSS framework, and Bootstrap 5 is mainly a collection of UI components.

Comparing Tailwind CSS to Bootstrap is like comparing apples to cars; it doesn’t make sense.

Bootstrap is more than a bunch of utility CSS classes. It provides a ton of excellent UI components that make use of JavaScript. Therefore, it has a larger footprint.

When used right, Tailwind CSS is extremely small (especially after compression).

Both are highly customizable.

Tailwind CSS will better fit teams that strongly value user interfaces.

Tailwind CSS VS. Bootstrap

Who uses Tailwind CSS?

The list of big companies using Tailwind CSS is quite impressive.

Some of them fully use the framework, while others do a weird blend.

And if you take a look at their code, you can see how they customize Tailwind CSS to their needs.

Here are few of them:

See more on the official website of Tailwind CSS.

Tailwind Play: a CodePen-like for quick prototyping

Tailwind Play is the best tool to focus on quickly crafting a piece of UI right from your browser.

It’s a straightforward web application with the following features:

  • An HTML editor with great autocompletion (including every class from the framework)
  • A CSS editor
  • A config editor
  • A magic button to reformat your code
  • A version switcher to use an experimental or an older version of the framework
  • A layout switcher
  • A light and dark mode switcher

That’s it, and that’s all you need to get started with Tailwind CSS.

You can jump to the last part of this tutorial, where we’ll craft a UI element to get the hang of the framework.

Tailwind Play

Tailwind Play CDN is convenient and unlike others

Tailwind Play CDN is not the typical CDN that serves a static file. It parses your HTML and injects the corresponding CSS into a <style> tag.

This is a great way to prototype any idea you have.

  1. Create a index.html file.
  2. Paste this code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <h1 class="text-3xl font-bold underline">
        Hello, world!
    </h1>
</body>
</html>

Et voilà!

I recommend using something other than it in production, as your performances may suffer.

How to set up Tailwind CSS in your project

Ultimately, Tailwind CSS is just a collection of styles. It can be integrated into any project.

For instance, the official website shows how to use Tailwind CSS with its CLI tool.

Or using PostCSS: https://tailwindcss.com/docs/installation/using-postcss.

And even apps that use Vite for processing and serving assets: https://tailwindcss.com/docs/guides/vite

You may also be interested in how to integrate Tailwind CSS inside a Laravel project that uses Vite (like this very blog): https://tailwindcss.com/docs/guides/laravel

Or if you’re still using Mix: https://tailwindcss.com/docs/guides/laravel#mix

Watch videos, the best way to learn Tailwind CSS

Videos are a great way to learn a new technology. There are plenty of free courses over the web, and they’re one Google search away from you.

That said, there are some I would recommend to anyone that’s not familiar with the framework.

First, Laracasts offers a free course called HTML and CSS workshop using Tailwind CSS.

Tailwind CSS even has an official YouTube channel.

They provide great videos showing off how to build useful UI components like “Building a command palette with Tailwind CSS, React, and Headless UI” or what could be your assignment at your job: “Translating a Custom Design System to Tailwind CSS”.

Ask for help on the official forum

Tailwind CSS has an official forum on GitHub. Feel free to ask about everything you’re unable to find on the documentation.

Tailwind CSS forum on GitHub

Best practices to keep everything organized

There are multiple ways to make sure Tailwind CSS doesn’t screw with your organization.

Use Visual Studio Code plugins

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense is a plugin that helps every developer work more efficiently with the framework by adding features like autocomplete, syntax highlighting, and linting.

A must-have!

Tailwind CSS IntelliSense on Visual Studio Marketplace

Inline Fold

Inline Fold

If you feel overwhelmed by the amount of classes in your HTML, you might want to collapse the class attribute for improved clarity.

Inline Fold is a plugin for Visual Studio Code that solves this problem really well.

Inline Fold on Visual Studio Marketplace

Use line breaks

Let’s say you have a button that looks like this:

<button class="bg-gradient-to-r from-indigo-300 dark:from-indigo-500 to-indigo-400 dark:to-indigo-600 font-semibold px-4 sm:px-6 py-2 rounded shadow-lg text-sm text-white w-full">
    Book me
</button>

One easy trick to make more readable is to break the class attribute to multiple lines:

<button
	class="bg-gradient-to-r from-indigo-300 dark:from-indigo-500
    to-indigo-400 dark:to-indigo-600 font-semibold px-4 sm:px-6
    py-2 rounded shadow-lg text-sm text-white w-full"
>
    Book me
</button>

Extract to a component

Extracting your button to a component (Blade, React, Vue or whatever you like) will drastically clean up your main files.

<!DOCTYPE html>
<html>
	<head>
		…
	</head>
	<body>
		…
		
		<x-button>
			Book me
		</x-button>
		
		…
	</body>
</html>

Extract to a parent class using the @apply directive

Another simple solution is to extract the classes to a parent class.

Tailwind CSS provides an @apply directive that inlines any default or custom style you might have defined.

.btn {
    @apply bg-gradient-to-r from-indigo-300 dark:from-indigo-500
    to-indigo-400 dark:to-indigo-600 font-semibold px-4 sm:px-6
    py-2 rounded shadow-lg text-sm text-white w-full
}

If you need to use !important, put it at the end of the line.

Do more with the official plugins

The container queries plugin

Instead of using media queries and viewport sizes to change an element’s layout, we can rely on the size of its container.

Here’s all about container queries on CSS-Tricks: Say Hello to CSS Container Queries

The container queries plugin provides a convenient way to handle them in a Tailwind CSS fashion.

<div class="@container">
    <div class="@lg:underline">
		<!-- This text will be underlined when the container is larger than `32rem` -->
	</div>
</div>

Read the official documentation on GitHub.

The forms plugin

The forms plugin is maintained by the team from Tailwind CSS. It resets forms to a consistent state across all browsers and makes them easily stylable.

Learn more: Tailwind CSS forms plugin: a step-by-step guide

The line clamp plugin

Tailwind CSS line clamp plugin.

The line clamp plugin will help you truncate lines of text at a given number of lines.

<p class="line-clamp-3">
	Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>

Read the official documentation on GitHub.

The typography plugin

Tailwind CSS typography plugin.

The typography plugin contains tons of styles, that you can customize, for written content. It’s extremely well done and useful.

You’re actually witnessing those styles on this blog post.

<article class="prose lg:prose-xl">
    <!-- Parsed Markdown -->
</article>

Read the official documentation.

Plenty of Tailwind CSS examples can be copied and pasted. No design skills required.

Due to its utility-first philosophy, Tailwind CSS allows to copy and paste fully-designed components into any website.

This is one of its strengths and you can experiment with components libraries right now. I compiled a list of free and paid ones.

Free libraries

Tailwind CSS alternatives

As with everything in life, there are alternatives.

Keep in mind we are looking for purely utility-first CSS frameworks. UI frameworks like Bootstrap actually have utility classes, and you can use them if you like.

These frameworks below can be integrated into any project based on any JavaScript framework (Ember, React, Svelte, Vue.js, etc.).

Recommended