How to configure Tailwind CSS with Next js ?

Published on

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Tailwind CSS makes it quicker to write and maintain the code of your application. In this blog, we will learn how to configure Tailwind CSS with the Next js application.

Introduction :

Next js :

Next.js is a React framework. Next.js is constitutionally an excellent tool to achieve great SEO performance. building super fast static websites that behave dynamically. Next.js when building UI and UX there is flexibility. and the important great community support. To know more about relative links click here

Tailwind CSS :

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, and easy integration of existing classes directly into the HTML code. This is to remove unused CSS code for improving our application overall. To know more about relative links click here

Node.js :

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on a JavaScript Engine and executes JavaScript code outside a web browser. and NPM is a package manager for Node. js packages. The NPM program is installed on your computer when you install Node.js. To know more about relative links click here

Flow Diagram:

Prerequisites :

You will need a desktop or laptop with one of the following OS and an internet connection.

Windows OS (with administrative access).
Ubuntu OS (should have a non-root user account with sudo access).
Mac OS (High Sierra or higher with administrative access).

Steps:

Step 1: Installing nodejs

Before we create Next App we need to install node.js.

if you already installed node.js please ignore this step 1 and go to step 2

Step 2: Create a Next-app

After installing Node.js open the terminal or command prompt and create a Next app with the following commands

1npx create-next-app my-project
2cd my-project

and then install Tailwind CSS with the following commands. To know more about tailwind configuration, please click here.

1npm install -D tailwindcss postcss autoprefixer
2npx tailwindcss init -p

Step 3: Configure for tailwind CSS

my-project → tailwind.config.js

Update the tailwind.config.js in the above path, using the following snippet.

1   content: [
2    "./pages/**/*.{js,ts,jsx,tsx}",
3    "./components/**/*.{js,ts,jsx,tsx}",
4  ],

As shown in the following screenshot

my-project →styles→global.css

Add the @tailwind directives for each of Tailwind’s layers to your global.css in the above path. using the following snippet. As shown in the following screenshot

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Step 4: Add Tailwind CSS to your files

my_project →pages→index.js

In Tailwind CSS we follow the inline styling method, therefore to test the tailwind CSS installation, please replace the contents of index.js in the above path, with the below snippet in your project.

1export default function Example() {
2  return (
3    <p className="mx-16 my-16 text-xl font-bold text-green-600 cursor-pointer">
4    Configure Tailwind CSS with Next.JS
5    </p>
6  );
7}