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.
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
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 (
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?
# 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.
With this command, you generate the config files
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
globals.css and add the code below:
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:
@apply container mx-auto px-4 mb-16 flex justify-center flex-col;
@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.
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 🚀