Tailwind CSS: the ultimate guide to get started

Benjamin Crozat Benjamin Crozat10 minutes read

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.

Table of contents

Tailwind CSS: the ultimate guide to get started

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>

Tailwind CSS makes you love front-end development

Tailwind CSS comes with the following benefits:

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 Tailwind CSS official website.

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:

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

Keep it 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>
 
- <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>
 
+ <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 provides forms reset and basic styling.

It’ll be way easier for you to customize and have similar results accross browsers.

Read the official documentation on GitHub.

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.

No design skills required. Copy & paste components.

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

Learning a framework can be overwhelming, but time and execution will make you a master. Here are some best practices to help you toward your goal.

Smaller and even easier than Vue.js, setting up Alpine.js is as easy as copying and pasting a code snippet.

Nailing a Laravel job interview can be a daunting task, but with the right preparation and mindset, you can set yourself up for success.

Here's a case study for my blog in the programming niche, where I share everything I did to increase clicks by a huge amount since the beginning.

Start leveraging the power of AI, today. AI enables developers to do incredible things, and many startups build products around it.

Take your code to the next level, thanks to exceptions. Handle errors in a more graceful way within try and catch blocks.

Have you heard about Laravel but don't know where to start? Don't worry; you just found the best starting point for your journey.

Knowing which Laravel version you are running is important before you start writing code on a new project. There are multiple ways to do so.

Looking to learn web development but don't know where to start? Check out our list of the best online paid and free platforms to get started!

Choose a web hosting provider for Laravel Forge and deploy your next Laravel project quickly and without any DevOps cost.

Powered by