How to implement TailwindCSS in your NextJS project ?

In this short article, I will show you how to add TailwindCSS in your NextJS project easily. I hope you will find it very useful!

First step
Let's begin by creating a NextJS project:
npx create-next-app tailwindcss-nextjs

Second step
Now that the project is created, we need to add the Tailwind dependency in order to use it.
npm install -D tailwindcss postcss autoprefixer

Finals steps
Let's go to the last step which is to configure Tailwind to be used. To do this, let's create the configuration file for Tailwind :
npx tailwindcss init -p

Then check that the file contains :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

If not, add it yourself.

Once the command is executed, go to the file ./styles/globals.css and replace with the following content:

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

Now you just have to start the NextJS project and you're done!

Thanks for having the article, have a nice day!