Tailwind CSS With Next.js

Next.js and Tailwind CSS

If you are reading this blog post, chances are that you know what Next.js and Tailwind CSS are. If you are unfamiliar with Next.js, I have a blog post going over Why I Love Using Next.js so I hope you can pick up a thing or two from that.

I'll discuss why I like to use Tailwind CSS and how you can get it up and running on a Next.js site!

Why Do I Use Tailwind CSS?

Tailwind CSS has been my go to for some time now due to how much I love the ease of use when it comes to creating good looking and responsive web applications. This website you are viewing right now is using Tailwind CSS for all the styling.

If you told me I had to make a marketing website at short notice, I would use Tailwind CSS any day. 

The way the Tailwind CSS framework works is by having preset classes which you can use directly on the HTML elements which in turn makes it great for creating web apps at speed. The good thing is, if there isn’t a class that has that style you are looking for then you can customise or add a new class in the Tailwind CSS config file.

Enough of why I like using Tailwind CSS, let's go through how to implement it into your Next.js web app, which is why you are really here.

How to Install Tailwind CSS in Next.js?

Install Dependencies

First things first, you need to install Tailwind using npm (Node Package Manager).

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

This is going to install Tailwind CSS, PostCSS and Autoprefixer to your project dependencies.

Create .config Files

npx tailwindcss init -p 

This going to build 2 config files.

postcss.config.js

postcss.config.js

tailwind.config.js

tailwind.config.js

The tailwind.config.js is the config file where you can extend or create new Tailwind CSS classes. Before, we move on you can replace the purge property with:

purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],

This will make sure to purge the CSS at build time so it removes all unused styles in the production build to help keep your web app speedy.

Include Tailwind CSS in your CSS

Import Tailwind CSS into your _app.js in the pages directory.

import "tailwindcss/tailwind.css";

This will make sure you can use the preset classes in your JSX elements.

Boom, that's it!

You now have a Next.js web app running Tailwind CSS for its styling magic.

If you are wanting to read more about the installation process with Next.js, Tailwind CSS has some really good documentation covering it.

Let's add in a <p> element to the index page and see what it looks like.

JSX example using Tailwind CSS

This is the JSX element I am going to be using to demonstrate the Tailwind CSS powers!

Example of JSX with Tailwind CSS styling

This will look very familiar to you if you use Next.js. I have added a paragraph element and styled it using the classes in the image above.

Conclusion

The best place to start learning the different Tailwind CSS classes is on the official documentation. It's got a pretty easy learning curve which should hopefully bring you an enjoyable development experience.

Here is some good resources which I have also used to get me up to speed with Tailwind.

Join the mailing list!