Tailwind CSS: the ultimate guide to get started

Benjamin Crozat

Modified on Mar 15, 2024 • 0 comments • Edit

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 I got the hang of Tailwind CSS, I couldn’t go back. So naturally, I have a lot to say about it and I hope you will find this big article helpful!

And by the way, if this isn’t enough, I can recommend you “Level up with Tailwind CSS” from Shruti Balasa, which is way more skilled at Tailwind CSS and CSS in general than I am. You won’t reget it.

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:

GitHub, for their research website
Google, for their I/O 2022 conference website
Laravel, for the Laracon Online website
Loom
Mashable
Microsoft .NET
NASA, for their Jet Propulsion Laboratory website
Netflix, for their global top 10 microsite
SavvyCal
Shopify
The Verge

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.

Create a index.html file.
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

Extend Tailwind CSS using the configuration file, not custom CSS

Tailwind CSS lets you customize a lot of things by simply editing the tailwind.config.js file.

For example, if you want to add a new color, you can extend the default theme to add your own set of values:

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        extend: {
            colors: {
                brand: '#abc123',
            },

            fontFamily: {
                handwriting: ['Some hanwriting font'],
            }
        }
    }
}

By leveraging the configuration file properly, tons of classes and their variants will be automatically generated for you like bg-brand, text-brand, border-brand, hover:bg-brand, etc.

Learn more on the official documentation.

Use Visual Studio Code plugins to work more efficiently with Tailwind CSS

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense is an official plugin made by Tailwind Labs 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 the Visual Studio Code marketplace.

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 the Visual Studio Code 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">
    Click 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"
>
    Click me
</button>

Extract to a component

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

Here’s a Blade template file using a button component containing the same code as above:

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

Don’t extract to a parent class. Leverage editor and language features instead.

Extracting a bunch of Tailwind CSS classes to a parent class is tempting.

.btn {
    @apply bg-gradient-to-r from-blue-400 to-blue-300 px-4 py-3 rounded
}

However, this completely defeats the purpose of Tailwind CSS, which is to have a single source of truth and make things easier to manage.

Instead, use your editor’s multi-cursor feature and create sub-components thanks to whatever templating engine you use.

Here’s an example written using Laravel’s Blade templating engine:

{{-- Somewhere in your views… --}}
<x-primary-btn>
    Click me
</x-primary-btn>

{{-- primary-btn.blade.php --}}
<x-btn class="bg-gradient-to-r from-blue-400 to-blue-300 text-white">
    {{ $slot }}
</x-btn>

{{-- btn.blade.php --}}
<button {{ $attributes->merge(['class' => 'bg-gray-200 px-4 py-3 rounded']) }}>
    {{ $slot }}
</button>

We begin with a base btn component with a gray rounded button that is enough for most cases.
Then, we have a primary-btn component that extends the btn component and adds a blue gradient background and white text. This component can be used for call-to-action buttons.

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.

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