Install Tailwind CSS with Next.js

Setting up Tailwind CSS in a Next.js project. You must have NodeJS installed on your computer.

1. Create your project
   If you haven't set up a Next.js project yet, start by creating a new one. The most commonly used approach is to Create a Next App.
   Or, simply run the below commands to create a new Next App.

        npx create-next-app@latest my-project
        cd my-project
   

   Congratulations on successfully creating your Next app! The next step is to proceed to part 2 where you can install Tailwind CSS.

2. Install Tailwind CSS
   Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

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

3. Configure your template paths

   Add the paths to all of your template files in your tailwind.config.js file.

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./components/**/*.{js,ts,jsx,tsx,mdx}",
   
        // Or if using `src` directory:
        "./src/**/*.{js,ts,jsx,tsx,mdx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }
   

   Just one step more.

4. Add the Tailwind directives to your global.css

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

---

Now, you have successfully implemented Tailwind CSS in your NexttJS application. Just follow these steps and you will see the magic happening on your website.

1. Start your build process

   Run your build process with npm run dev or yarn dev

        npm run dev
   

2. Start using Tailwind in your project

   Start using Tailwind’s utility classes to style your content.

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

   Visit the Tailwind CSS website to explore more.

   If you are new to Tailwind, you might find Tailblock useful.

   If you find this article useful, leave a comment.
   You can also follow me on Twitter as well.
   My LinkedIn account.