In this article, I want to tell you why Tailwind CSS and Next.js form a great combination.

Some people hate writing CSS, while others love to write it. I’m one of the latter, but using a tool that helps me create a website a lot faster and brings stability into my work will always make me excited.

On my blog, I’ve used Tailwind CSS before — and I’ve been convinced to use it in more of my web development projects. If you don’t know Next.js, I would recommend reading my previous article.

This story was originally published on ByRayRay.dev

1. Why Use Tailwind CSS?

Compare Tailwind CSS to a CSS framework like Bootstrap or Foundation, and you will find out that they’re completely different.

I can sniff a Bootstrap website or application from miles away. You won’t notice a website or application that is using Tailwind CSS (unless you check the class names in the source code).

Tailwind CSS is a utility framework like no other. There is no set of pre-built components. It’s a framework where you find classes like text-white, grid, object-fit, and a lot more.

So it doesn’t matter how your design looks. Tailwind CSS is the ideal partner for building every stunning design.

So here is the question: “Why use Tailwind CSS?” Well, why not?

Tailwind CSS will give you all the power you need to build whatever you wish. You can easily adjust the colors, sizes, and media queries.

From the outside, you will not notice that Tailwind CSS is the driving force behind it.

2. You Have to Know CSS

But there is something you need to know before you use Tailwind CSS: You have to understand CSS.

If you can’t build a design with plain CSS, I won’t recommend picking Tailwind CSS.

Developers who know the most basic stuff — like font size, padding, margin, position, flex, and the grid — will have no issue using Tailwind. So if you know all these things in CSS, I highly recommend using Tailwind CSS.

For example, setting a different font size on a specific media query is as simple as adding a class name (md:font-size) or changing the height (sm:w-16).

You can change those numbers in the class names in the configuration file.

So give it a shot and add it to your Next.js project.

3. How to Add Tailwind CSS to Next.js

It’s super simple to add Tailwind CSS to your Next.js, so you will be able to start in no time. In this case, I will assume you use Next.js v10 because why wouldn’t you?

Installation

# If you're on Next.js v10
npm install tailwindcss@latest postcss@latest autoprefixer@latest

Via the command above, you will install Tailwind CSS and the PostCSS (you can also use it with any other CSS pre-processor) and autoprefixer dependencies.

Configuration

With this command, you generate the config files tailwind.config.js and postcss.config.js:

npx tailwindcss init -p

These files will be at the root of your project. In the tailwind.config.js file, you can configure things like the sizes, fonts, and colors. In the postcss.config.js, you can add all the PostCSS plugins you want to use:

In the config, we want to define the location of our pages and components. By defining this, we can let Tailwind tree-shake all the unneeded styles in our production builds.

Include Tailwind CSS

Open globals.css and add the code below:

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

You can also include everything from Tailwind in the pages/_app.js like so:

4. How to Use Tailwind CSS

There are two ways to use Tailwind in your CSS.

The first is using all the class names that Tailwind has. You can use it as in the example below:

The second option you could use is this:

.content__container {
@apply container mx-auto px-4 mb-16 flex justify-center flex-col;
}

.content {
@apply grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8;
}

It’s just a matter of preference. In the first example, your HTML is going to be full of class names. In the second example, you may have a cleaner way.

But in both approaches, you should get familiar with all the class names Tailwind has. Thankfully, Tailwind has created a significant amount of documentation.

Conclusion

Thanks for reading. Hopefully, you can now use Tailwind CSS in your Next.js website. If you have any questions or want to show your Next.js website, let me know in the comments section.

Happy coding 🚀

Read more

5 Rules to Improve Code Readability
_Code readability is a feature of your application (even if your users don’t see it)_medium.com

How to Build and Deploy a Jamstack Website Fast With Next.js
_Why Next.js is a smart choice_medium.com

Tips to Create Developer Tutorials
_Want to write more tutorials but you aren’t sure where to start? Start here_medium.com

How to Learn JavaScript The Easy Way?
_1. Start with the theory first!_medium.com