Using Tailwind CSS on Nextjs

Technologies:

Next JS is an open-source framework based on React JS owned by Vercel. On this post, we will see how we can use Tailwind CSS on Next JS.

Why Next JS and Tailwind CSS

Next JS is an open-source framework based on React JS. While React JS can only be used to develop the applications that are executed on the web browser, many applications require server-side execution. This is where Next JS comes into play. Next JS is designed to be executed on the server, hence developers can use the React JS on building server-side applications as well.

Tailwind CSS is a modern CSS library that is getting popularity among developers. The reason is that Tailwind CSS is highly customizable and easy to implement. Tailwind CSS takes the approach of mobile layouts as the starting point so that developers can build responsible layouts without having to code from scratch. Tailwind CSS comes with all the utility classes any developer would need to build UI.

When using both Next JS and Tailwind CSS, developers can build beautiful products. Now let's see how we can get started with Tailwind CSS and Next JS

Setting Up Tailwind CSS with Next JS

Installations

To get started with Next JS, you will need

Node JS and NPM are installed on your machine.
Visual Studio Code to develop applications. You can use any editor of your choice. I prefer Visual Studio Code though.

Bootstrap Your Application

We will be using create-next-app to get started with the Next JS application.

First, you will need to install this command on your machine. I am using Windows OS, however, if you are using Linux or macOS, the steps will remain the same. To install, open cmd or bash and run the below command:

npx create-next-app@latest

Here we are installing the latest version, which is fine for our case. You can specify the version if you do not want to use the latest.

Once you run the command, you will be prompted if you want to create a new application.

Enter the name of your application. I gave the name my-app. Npx will go ahead with installing the dependencies: react, react-dom, and next.

Once the installation is completed you can go ahead.

Running Next JS Application

Now navigate inside the folder of your application by running the command below:

cd my-app

Inside this folder, run the command below:

npm run dev

You will get the output something like;

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

If you get the output below, you can go ahead with installing Tailwind CSS on your project:

Installing Tailwind CSS

Tailwind CSS can be installed as the dependency in Next JS application. There are other ways to install Tailwind CSS in your application as well.

In your project directory, run the below command:

npm i -D tailwindcss postcss autoprefixer

This will install Tailwind CSS along with the dependencies.

Once the dependencies have been installed, we will need to initialize Tailwind CSS. Run the below command to initialize it:

npx tailwindcss init -p

This will create a new file called: tailwind.config.js.

Now open the newly created tailwind.config.js, and copy the below code:

module.exports = {
  content: [
    // add this lines
    "./pages/**/*.{js,ts,jsx,tsx}",
    // if you have other folder, add its path too, like this:
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now, whenever you want to include the Tailwind CSS, you will have to import it using the below line:
```
import 'tailwindcss/tailwind.css';
```

By default, the Next JS puts the files in the /pages folder. In your /pages folder you will find a file called index.js.

First import the Tailwind CSS, using the below line:

import 'tailwindcss/tailwind.css';

Add the below code in your Home component:

<div className="py-12 bg-white">
	<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
		<div className="lg:text-center">
            <h2 className="text-black-500 font-semibold">My Tailwind Block in Next JS Application</h2>
		</div>
	</div>
</div>

Now run the application again using npm run dev command. You will see the output:

Conclusion

In this post, we saw how we can set up Next JS with Tailwind CSS. This was a short post we saw how Tailwind CSS and Next JS can be worked together.

Once you have installed the Tailwind CSS you can leverage the power of CSS inside your HTML.