The Beginners Breezy Intro to Tailwind

You've probably seen Tailwind somewhere around the internet. Whether it's recommended by your favorite web framework, criticized in another article for being "messy", or shouted on the rooftops by some web dev influencer, Tailwind has undoubtedly made its impact in the dev world.

In this article, I'll explain Tailwind's main concepts through the assumption that you have little to no knowledge of it. This article is not to persuade you but rather to inform you of what Tailwind is and how you could add it to a Next.js project. If you don't want to use Next.js, you can view the list of guides 👉 here.

With all that out of the way, let's dive in!

What IS Tailwind?

Tailwind, in short, is a CSS library made up of a bunch of utility classes that have been pre-selected for you with your interest in mind.

Interesting, how so?

I can only cover so much, but if you're interested, please please please read the book. Tailwind isn't just a bunch of RANDOM utility classes, they're specifically selected to help you build responsive and elegant design solutions.

What's a utility class?

Utility classes are generally agreed upon as being simple, single-use classes. In the realm of CSS, a utility class could be flex which could translate to display: flex or rotate-90 which could translate to transform: rotate(90deg) or even shadow which could translate to box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);.

☝️ These are all Tailwind utilities by the way.

Hopefully, these examples shed some light as to why one would want to use utility classes.

You may be wondering, if Tailwind is a bunch of these "utility classes", why couldn't I just make my own in a *.css file?

In truth, you totally can. You can take the time to define your utility classes and create your design system. But if you don't have the time or resources, Tailwind would be an excellent option.

Tailwind has things like light/dark mode, theme support, hover and focus classes, CSS grouping, media queries, and a bunch of optional plugins that you can set up before your coffee maker finishes your morning brew.

More CSS vs. Tailwind things 👉 here.

How does it work?

Tailwind, like many tools, needs a configuration file so it knows what to do. This file is either called tailwind.config.js or tailwind.config.ts for you Typescript nerds.

When you're editing your tailwind.config.ts file, you're able to specify a "content" property. This property tells Tailwind where to look for its utility classes and which file extensions it should care about.

In this screenshot, I'm telling Tailwind to look at my pages, components, and app directories for files that end in *.js, *.ts, *.jsx, *.tsx, and *.mdx. If I had html files in these directories, I'd include *.html too.

When building your site, Tailwind will look at these files and see where and which utility classes are actually being used.

It will only care about the ones being used and disregard the other utility classes it knows about. This is part of its tree-shaking process.

How can I install it?

There's typically two routes you can take to add Tailwind to your project. Via the Tailwind CLI or as a PostCSS plugin.

According to the docs Tailwind CLI is "the simplest and fastest way to get up and running with Tailwind". Though this is true, I want to stick with a different approach. The one that you'd probably use to integrate it into your project by using Tailwind as a PostCSS plugin. This is the recommended way to integrate it into your project if you're using Webpack, Vite, Rollup or any other build tool.

See how your framework should use Tailwind 👉 here.

Before installing it though, we should probably understand two other tools that are needed for this. PostCSS and Autoprefixer.

According to their Git repo, PostCSS is "a tool for transforming styles with JavaScript plugins". In short, it "takes a CSS file and provides an API to analyze and modify its rules by transforming them into an abstract syntax tree" using JavaScript. "This API can then be used by plugins". Plugins like TailwindCSS and Autoprefixer in our case.

Autoprefixer, according to the NPM docs, is a PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.

Here's a list of some browser prefixes as of the time of this article:

-webkit- (Chrome, Safari, newer versions of Opera and Edge, almost all iOS browsers, basically any WebKit or Chromium-based browser)
-moz- (Firefox)
-o- (old pre-WebKit versions of Opera)
-ms- (Internet Explorer and Microsoft Edge, before Chromium)

Okay cool, now that we understand what these things are, let's get back to installing Tailwind in our app.

Setting it up in a Next.js app

If you want to skip setting it up and just play around, you can install an already configured template and play around with it 👉 here.

Also, if you like this template or have suggestions, please star it or create an issue. Thank you!

Otherwise, let's follow the Tailwind docs and set this up from a clean slate.

To start off, let's install a VSCode extension to give us some IntelliSense:

Then, let's setup a new Next.js project:

Next, we'll install tailwind and our dependencies with npm:

In order to use Tailwind, we'll need to tell it which files to look at in the "content" section of our Tailwind config:

After that, we'll need to add Tailwind's directives to Next.js' globals.css file. This is needed to use it's utility classes. More info 👉 here.

Now that everything is set up, you should be able to start styling your site! With every tool, there's a learning curve and it's impossible to remember everything. So that's why I use a cheatsheet to help me build things.

Adding your own utility classes

What if we wanted to add our custom branding colors? We can do that by creating custom utility classes in our config.

There's a section in your tailwind.config.js file that allows you to add additional utility classes by extending your theme. You can see from the image below, I include two new colors, primary and errorOnLight. After making your changes here, you can now use them in your html.

I like to define my brand colors in the config so I can use them in the project. You can choose to either keep all the Tailwind colors or only keep your custom ones, the choice is yours.

Tree-shaking and production

So we're able to setup Tailwind in a Next.js site, but what happens when we want to build for production?

From the docs:
"Tailwind CSS is incredibly performance focused and aims to produce the smallest CSS file possible by only generating the CSS you are actually using in your project.

Combined with minification and network compression, this usually leads to CSS files that are less than 10kB, even for large projects. For example, Netflix uses Tailwind for Netflix Top 10 and the entire website delivers only 6.5kB of CSS over the network."

If you installed Tailwind as a PostCSS plugin (we did in this article) you can also use cssnano as a plugin to reduce the CSS bundle when we make a production build. More info on that 👉 here. However, I have not noticed this making a difference in a Next.js application. Probably due to Next.js minimizing things for us automatically.

I hope this leaves you with a better understanding of what Tailwind is! Did I miss something? Do you know a cool Tailwind trick? Let me know in the comments below!

Thanks for reading!

Cover image created by Булат Салихов