Tailwind Setup in NextJS Project

This is the simple way to configuration your NextJS Project with TailwindCSS. I'll guide you how to configure it based the official documentation of TailwindCSS.

Installation & configuration

1. Create your NextJS Project first.
   if you already created NextJS you can skip this step, Use your fav terminal and input this command.

   npx create-next-app@latest tailwind-demo-next --typescript --eslint

2. Open NextJS project in your text editor.

3. Install Tailwind CSS.
   following this command in the terminal to generate both tailwind.config.js and postcss.config.js.

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

4. Configure path tailwindcss.
   add this all script to your tailwind.config.js

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

5. Implement tailwindcss to your public CSS.
   i prefer you to create a new css file inside the folder ./styles/index.css
   also add this script to your index.css.

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

6. Change the css link inside file _app.tsx.
   you can adjust your index.css to be your public css in this project, like this

   

7. Implement tailwind style in this project.
   you can use tailwind style inside index.tsx file.
   the file directori is in ./pages/index.tsx or you can use CTRL + P in Visual Studio Code and enter index.tsx. Automatically vscode will open the file you are looking for

   Example:

   export default function Home() {
     return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
   }
   

8. Start your NextJS project.
   enter this command in your terminal inside project, and show what happen
   npm run dev

Voila.. 🎉✨🎉

now you can use tailwindcss in nextjs project

Source: Tailwind CSS NextJS