What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that can provide many benefits for a web development project. It lets you style your HTML content by appending a multitude of predefined utility CSS classes to your HTML elements. For example say you were creating a Card component with a heading, description and image using ReactJS.

const Card = ({ heading, description, image }) => {
	return (
		<div className="cardContainer">
			<img src={image} className="cardImage" alt="" />
			<div>
				<h3 className="cardHeading">{heading}</h3>
				<div className="cardDescription">{description}</div>
			</div>
		</div>
	);
};

Using standard CSS we would create classes for all the elements in our Card component like the example above. This would require us to create these individual classes in a CSS file. In this scenario there are two things that need to be done:

  1. Name our CSS class names: Naming can be difficult, especially when multiple team members are involved. It can lead to confusion, for example, if one person refers to a component as a "tile" and another calls it a "card."
  2. Duplication: Repeating the same CSS properties multiple times throughout the CSS file(s) e.g. margin: 0 and padding: 1rem we can end up with a mess that most developers on your team would be afraid to change for fear of regression issues.
.cardContainer {
	border-radius: 0.75rem;
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1rem;
	padding: 1rem;
	background-color: white;
	box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px
			6px -4px rgb(0 0 0 / 0.1);
}
.cardHeading {
	font-weight: bold;
}

Compare this to the same component but this time using CSS classes from Tailwind CSS below. Initially it's a shock to see such a mess of CSS classes for each HTML element. But each class is easy to remember as they map to existing CSS properties, and will not be repeated in the CSS file.

const Card = ({ heading, description, image }) => {
	return (
		<div className="rounded-xl shadow-lg bg-white p-4 mb-4 flex gap-2">
			<img src={image} className="rounded-lg" alt="" />
			<div>
				<h3 className="font-bold">{heading}</h3>
				<div className="font-serif">{description}</div>
			</div>
		</div>
	);
};

Why should I use Tailwind CSS? #

So why would you use Tailwind and pollute your components with all these class names?

The most common answer to why is you don't have to worry about naming classes or naming collisions in your CSS. Instead you can just get on with using the CSS properties you already know and set about applying them to your HTML elements. You don't even need to view the CSS file. You can just remain working on the component with the occasional look at the Tailwind documentation.

Some more reasons to use Tailwind CSS are:

What makes the Tailwind CSS developer experience (DX) good? #

In terms of developer experience once you get over it looking like horrible tag soup with all those CSS classes scattered through your HTML/JSX files you will start to notice a couple of things:

When should I use Tailwind CSS? #

Based on my experience, Tailwind CSS is most effective when used on a team where some or most of the developers have limited CSS skills. Establishing a consistent design system using CSS can be a time-consuming process. It requires a solid understanding of CSS as well as strong communication skills to establish a process and create a style guide that all team members must adhere to, instead of relying on "janky" CSS hacks for the desired look from StackOverflow.

Tailwind CSS can simplify the documentation process by providing comprehensive documentation and resources for getting started, both from the official Tailwind developers and the community. This can make it easier to understand and implement.

What are the downsides of Tailwind CSS? #

Although Tailwind CSS offers many benefits, there are some drawbacks that could affect both the short-term and long-term success of your project:

Tailwind can be a suitable choice for almost any team, especially those that have no strong lead in CSS. Although it has some drawbacks, it sits between Bootstrap and native CSS in terms of flexibility and appearance. It avoids the common "look and feel" of websites built with Bootstrap, while providing some rails to prevent a large messy CSS file. To get the most out of Tailwind, it is important to adhere to its recommended practices and adjust your process to it's way.

If this hasn't put you off using Tailwind CSS in your next project I recommend you checking out the Freecodecamp Learn Tailwind CSS - Course for Beginners and my cheat-sheet below.

Tailwind Flexbox Cheatsheet
Tailwind Flexbox Cheatsheet

Having trouble with flexbox layout using Tailwind CSS? This cheatsheet can help you quickly find the right class style for your next flexbox layout, with diagrams included.

Pay what you want
Tags:
 tailwindcss,
 css