Step-by-Step Guide to Installing Next.js and Setting Up Tailwind CSS in Visual Studio Code

In this guide, I'll walk you through the process of setting up a Next.js project and integrating Tailwind CSS for styling, all within Visual Studio Code. By the end, you’ll have a fully functional Next.js app styled with Tailwind CSS!

Prerequisites

* Node.js: Make sure Node.js is installed on your computer. Next.js requires version 18 or higher.

* Visual Studio Code: Open your project here, as it provides a consistent terminal experience across Windows and Mac.

Step 1: Check Node.js Installation

* Open Terminal in Visual Studio Code:

* Go to the top menu and select Terminal > New Terminal.

* Or use the shortcut Ctrl + ~ (tilde) to open the terminal.

* Verify Node.js Installation:

* Run the following command to check your Node.js version:

node -v

* Copy code

node -v

* If you don’t have Node.js installed, download it from Node.js, choosing the LTS version. Follow the installation prompts.

* Verify NPM Installation:

* Node.js installation automatically includes npm. Confirm its version with:

npm -v

* Copy code

npm -v

Step 2: Create a Project Folder

* On your desktop or a location of your choice, create a folder named projects (or any preferred name).

* Inside, create another folder for your Next.js app. For this example, we’ll name it my-next-app.

* Drag and drop this folder into Visual Studio Code to open it.

Step 3: Install Next.js

* Run the Next.js Installation Command:

* In the terminal, use npx to install Next.js:

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

* Copy code

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

* Here’s a breakdown of the installation prompts:

* Project Name: Enter my-next-app or another name. Avoid uppercase letters or starting with a number.

* TypeScript: Choose No (or Yes if you want TypeScript).

* ESLint: Choose No (or Yes if you need linting).

* Tailwind CSS: Select Yes to automatically install and configure Tailwind.

* Source Directory: Select Yes to store your code in a src directory.

* App Router: Choose Yes to enable routing (like React Router).

* Turbo Pack: Choose No.

* Custom Imports: Select No.

* Navigate to Your Project Directory:

* Once the setup completes, move into the newly created project directory:

cd my-next-app

* Copy code

cd my-next-app

Step 4: Start the Development Server

* In the terminal, run the following command to start your Next.js app in development mode:

npm run dev

* Copy code

npm run dev

* After a few seconds, your app will be live at

http://localhost:3000

* .

* Hold Ctrl and click the link in the terminal to open it.

* Alternatively, open a browser and go to http://localhost:3000

Step 5: Verify Tailwind CSS Setup

* Open any page file, like src/pages/index.js.

* In the classes, you’ll notice Tailwind’s utility classes ready for styling. With Tailwind installed, you can now apply utility-first CSS classes directly in your JSX.

Wrap Up

That’s it! You now have a Next.js app with Tailwind CSS configured. Tailwind’s powerful styling makes it easy to quickly build and customize UIs.

Thank you for following along. Happy coding!

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe