How to set up and configure a Tailwind CSS in NEXT JS.

Tailwind CSS is a utility-based framework based on CSS. It provides a catalog of CSS classes that makes the process of styling more convenient. Tailwind provides developers with the customizability to make their own designs, which promotes a greater level of creativity as compared to the other frameworks that come with built-in UI components.

Next.js is a React-based full-stack framework developed by vercel that enables functionalities like pre-rendering of web pages. Unlike traditional react app where the entire app is loaded on the client, Next.js allow the web page to be rendered on the server, which is great for performance and SEO.

In this article, we will learn how to set up Tailwind CSS with Next.js. Before installing Tailwind CSS, make sure you have node js installed. Here are the steps to set up and configure tailwind in next js:

1.Create a new Next Project

You can create a new Next application using the command below.

yarn create next-app <project-title>

2. Install Tailwind CSS

Install Tailwind CSS and its peer dependencies.

yarn add tailwindcss@latest postcss@latest autoprefixer@latest

3.Create Tailwind config file

Run the following command to create a tailwind config file, this file can be used to extend the tailwind’s functionality.

npx tailwindcss init -p

4. Configure your template paths

We need to configure file paths, for tailwind to work. So, in your tailwind.config.js file, add the following configuration.

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

This configuration is only for pages and components directory, you can also configure your custom folders here.

5.Add the Tailwind directives to your CSS

In your /styles/global.css file, add the layer directives of tailwind CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

6.Testing Tailwind CSS

Now that we have set up the tailwind CSS, let’s test it out. In the /pages/index.js file, we will first clean all the boilerplate code and test some utility classes from Tailwind CSS.