Create a Next.js App with Tailwind CSS

Hey Guys! This article will teach you how to create a next js app with tailwind CSS. Both Next js and tailwind CSS are extremely famous frameworks. They make web development easy with their features. Today we will create an app with their latest version. We will also take a look at the Next js framework.

Let's begin.

Topic covered in this article:-

1. What is Next.js?
2. How to create a Next.js app?
3. How to install and set up tailwind CSS for the Next.js project?
4. How to run a Next.js app?

Before creating this app, we will take a look at Next.js.

What is Next.js?

Next.js is a popular and lightweight React framework created by Vercel. It is an open-source framework that enables you to create static and server-rendered applications built with react. Unlike react app, where the entire app is loaded on the client side, it renders the web app on the server side. It gives fast speed to the web application. It also enables SEO friendly approach that increases your web application's value in search engines.

Recently Next.js 13 was released. Although some of its features are under development which changes the entire game. Because Next.js 13 provides mind-blowing features such as an app folder, Turbopack, etc.

We will create our app in Next.js 13 version. So, let's start

Projects suggested for you:-

• Build a Tic-Tac-Toe Game using React
• How to make Pokemon App in React
• How to build Google Keep Clone with react JS

How to create a Next.js app?

To create an application, follow the step one by one.

1. Create a new app

   Run this command to set up the Next app automatically. It also creates a new folder for you. So don't create an empty folder for it.

# If you are using npm / npx
      
	npx create-next-app@latest

# If you are using yarn

	yarn create next-app

# If you are using pnpm

	pnpm create next-app

2. Enter the project name.

   After running the previous code, it asks project name like ? What is your project name?... . Enter a project name like 'nextjs-app' in our case.

3. Would you like to go with TypeScript or not?

   If you want to go with JavaScript, Select "No"  otherwise select "Yes"

   In the terminal, it shows like this ? wolud you like to choose TypeScript with this project >> No / Yes. For JavaScript - No | For TypeScript - Yes.

4. Would you like to use ES Lint with this project?

   Now it asks ? Would you like to use ESLint with this project? >> No / Yes. Select "Yes" (Recommended). 

5. Your app is ready.

   It took some time to install dependencies. If you can see the result in the image, your Next.js is ready for production.

   

You did it.

Run the app using npm run dev. Try to edit /pages/index.js the page and look at the changes on url https://localhost:3000/. Later, we will also learn it in detail.

We created the Nest.js app. Now let's add Tailwind CSS to it.

How to install and set up tailwind CSS for the Next.js project?

To install Tailwind CSS in the Next.js app, follow the instructions given below:-

1. Install tailwindcss.

   Run the given command to install tailwindcss.

   # If you are using npm
         
   	npm install -D tailwindcss postcss autoprefixer
       
   # If you are using yarn
   
   	yarn add -D tailwindcss postcss autoprefixer
       

2. Initialize Tailwind CSS.

   # For npm / npx users
         
   	npx tailwindcss init -p
   
   # for yarn user
   
   	yarn tailwindcss init -p

   This command generates both tailwind.config.jsand postcss.config.js in your Next js app.

3. Configure template path.

   You need to configure all template files path to work with tailwindcss. Go to tailwind.config.js the file and add the following configuration. Or you can replace your tailwind.config.js code with the given code.

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

4. Add tailwind directives to your CSS

   Add the given code of tailwind layer directives in your /styles/global.css file. You can also replace the given code with the global.css file.

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

5. Testing Tailwind CSS

   We set up a tailwind CSS. It is time to test it out. Clean all code in the /pages/index.js file and test tailwind CSS utility classes. Or replace all codes of /pages/index.js the file with the given code.

   import Head from "next/head";
   import Image from "next/image";
   
   export default function Home() {
     return (
       <div className="flex min-h-screen flex-col items-center justify-center py-2 bg-slate-900 text-white">
         <Head>
           <title>Create Next App</title>
           <link rel="icon" href="/favicon.ico" />
         </Head>
   
         <main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center">
           <h1 className="text-6xl font-bold my-5">
             Welcome to{" "}
             <a
               className="text-blue-600 flex items-center justify-center mt-5 invert"
               href="https://nextjs.org"
             >
               <Image src="/next.svg" alt="Vercel Logo" width={180} height={37} />
               <div className="mx-2 border border-slate-700 p-1.5 rounded-md ">
                 <Image
                   src="/thirteen.svg"
                   alt="Vercel Logo"
                   width={40}
                   height={31}
                 />
               </div>
             </a>
           </h1>
   
           <p className="mt-3 text-2xl">
             Get started by editing{" "}
             <code className="rounded-md bg-gray-100 p-3 font-mono text-lg text-black">
               pages/index.tsx
             </code>
           </p>
   
           <div className="mt-6 flex max-w-4xl flex-wrap items-center justify-around sm:w-full">
             <a
               href="https://nextjs.org/docs"
               className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600"
             >
               <h3 className="text-2xl font-bold">Documentation &rarr;</h3>
               <p className="mt-4 text-xl">
                 Find in-depth information about Next.js features and its API.
               </p>
             </a>
   
             <a
               href="https://nextjs.org/learn"
               className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600"
             >
               <h3 className="text-2xl font-bold">Learn &rarr;</h3>
               <p className="mt-4 text-xl">
                 Learn about Next.js in an interactive course with quizzes!
               </p>
             </a>
   
             <a
               href="https://github.com/vercel/next.js/tree/canary/examples"
               className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600"
             >
               <h3 className="text-2xl font-bold">Examples &rarr;</h3>
               <p className="mt-4 text-xl">
                 Discover and deploy boilerplate example Next.js projects.
               </p>
             </a>
   
             <a
               href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
               className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600"
             >
               <h3 className="text-2xl font-bold">Deploy &rarr;</h3>
               <p className="mt-4 text-xl">
                 Instantly deploy your Next.js site to a public URL with Vercel.
               </p>
             </a>
           </div>
         </main>
   
         <footer className="flex h-24 w-full items-center justify-center border-t mt-2">
           <a
             className="flex items-center justify-center gap-2"
             href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
           >
             Powered by{" "}
             <Image
               src="/vercel.svg"
               alt="Vercel Logo"
               width={72}
               height={16}
               className="bg-slate-50 p-2 rounded"
             />
           </a>
         </footer>
       </div>
     );
   }

How to run the Next.js app?

To start this app, run the following command in your current terminal:-

• Go to the project directory.

  # Go TO project directory
    
    cd project-name
    

• Run the application.

  To run this application, run the command given below.

  # If you are using npm
  
  	npm run dev
  
  # If you are using yarn
  
  	yarn dev
  
  # If you are using pnpm
  
  	pnpm dev
    

• To view your running application, visit https://localhost:3000.
• Edit pages/index.js and see updated results in the web browser.

That's it!

Conclusion

Now we learned How to create the Next.js app with Tailwind CSS. Build an application yourself with Next.js. Once you've done that, you're good to go. I'm sure you learned something new from this tutorial. If you do so, share it with your friends. Don't forget to leave a comment in the comment section. It means a lot.

Thank you!