Setting up a “Hello, World!” web app with Next.js and Tailwind CSS

Tutorials
Author

David Wu

Published

March 19, 2023

We set up a “Hello, World!” web app with Next.js and Tailwind CSS. We will begin by creating a new Next.js web app using create-next-app, following the getting started section of the official Next.js docs. Following that, we will simplify the provided source code so that our app frontend displays the text “Hello, World!”. Finally, we will integrate Tailwind CSS into our project, following the Next.js section of the official Tailwind CSS docs.

System requirements

Next.js requires Node.js version 14.6.0 or later.

JavaScript and TypeScript

We set up our “Hello, World!” web app using JavaScript.

Under the Wave off Kanagawa (Kanagawa oki nami ura), also called the The Great Wave, Katsushika Hokusai, 1826-1836. Source: The Art Institute of Chicago. License: CC0

Creating a new Next.js web app using create-next-app

To begin, using the terminal, we first change the working directory to the folder (e.g. projects) in which we will create a subfolder (e.g., projects/hello-world-next-js-tailwind-css) to store all of our web app’s files. Running create-next-app will create this subfolder for us.

To create a new Next.js web app using create-next-app, we run the following terminal command:

npx create-next-app@latest

For our purposes here, we respond to the set up questions as follows:

  • What is your project named? hello-world-next-js-tailwind-css
  • Would you like to use TypeScript with this project? No
  • Would you like to use ESLint with this project? No

To keep things simple, we use JavaScript instead of TypeScript and do not use ESLint.create-next-app will proceed to automatically download and install the dependencies for our Next.js app.

Once create-next-app has successfully executed, we change the working directory into the folder containing our web app’s files (e.g., hello-world-next-js-tailwind-css). We see that create-next-app has created a number of files and folders:

hello-world-next-js-tailwind-css
├── .gitignore
├── .next
│   ├── ...
│   :   
│   └── ...
├── README.md
├── next.config.js
├── node_modules
│   ├── ...
│   :   
│   └── ...
├── package-lock.json
├── package.json
├── pages
│   ├── _app.js
│   ├── _document.js
│   ├── api
│   │   └── hello.js
│   └── index.js
├── public
│   ├── favicon.ico
│   ├── next.svg
│   ├── thirteen.svg
│   └── vercel.svg
└── styles
    ├── Home.module.css
    └── globals.css

This project structure and the provided files are a strong starting point for building a web app. Rather than starting from scratch, we can edit the provided files and add and delete our own files. It’s worth noting that .next, the build directory, and node_modules, the directory containing the packages on which our project depends, will be autogenerated by Next.js in the course of our development. It’s best practice not to edit the content of these files manually.

To start the development server and deploy our web app locally, we run the following command:

npm run dev

We can now open our web app locally in a web browser at the address http://localhost:3000:

The start page for create-next-app at http://localhost:3000

Simplifying the web app frontend to display the text “Hello, World!”

Next, we edit our project files to simplify the web app frontend to display the text “Hello, World!”. When changes to our project files are saved, Next.js will automatically re-render our web app.

We start by editing the root page, which corresponds to http://localhost:3000. The pages of our web app are located in the pages directory. The root page corresponds to pages/index.js. We simplify the contents of index.js to the following:

import Head from "next/head";

export default function Home() {
  return (
    <>
      <Head>
        <title>"Hello, World!" app with Next.js and Tailwind CSS</title>
        <meta
          name="description"
          content='"Hello, World!" app with Next.js and Tailwind CSS'
        />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Hello, World!</h1>
      </main>
    </>
  );
}

Our web app will re-render, but the styling will look odd. We simply want to display the text “Hello, World!” in black against a white background.

To achieve this, we open styles/globals.css and delete all the contents within this file, leaving us with a blank file. We will use Tailwind CSS to style our app and will add Tailwind configuration settings to this file. The root page should re-render with the desired outcome:

Our “Hello, World!” Next.js app

We also delete the following files that were used in rendering the original root page but are now no longer of use:

  • styles/Home.module.css
  • next.svg
  • thirteen.svg
  • vercel.svg

Integrating Tailwind CSS into our project

To integrate Tailwind CSS into our Next.js web app, we first need to install the Tailwind CSS npm package, tailwindcss, and its dependencies, postcss and autoprefixer. We run the following command:

npm install -D tailwindcss postcss autoprefixer

Next, we run the init command provided by tailwindcss to generate tailwind.config.js and postcss.config.js:

npx tailwindcss init -p

Returning to the empty CSS style sheet located at styles/globals.css, we insert the Tailwind CSS directives into this file:

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

Before we can use Tailwind CSS in our project, we also need to add the paths to all of the files in which we will use Tailwind CSS styles to our tailwind.config.js file. We replace the contents of tailwind.config.js with the following:

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

To use Tailwind CSS in our project, we add the provided utility classes to the class name attributes of the HTML elements that we would like to customise.

Let’s make the “Hello, World!” text larger, adjust its weight to bold and change its colour to blue. To do this, we specify utility classes in the opening tag of the h1 element:

<h1 className="text-4xl font-bold text-blue-600 ">Hello, World!</h1>

The final result should look something like this:

Our “Hello, World!” web app with Next.js and Tailwind CSS

Resources to learn more about Next.js and Tailwind CSS

The best places to learn more about Next.js and Tailwind CSS are the officials docs:

They provide the most authoritative and up-to-date information on how to use these technologies. The docs are useful as both a learning resource and a reference. Other than the official docs, there are of course many learning resources elsewhere, including on YouTube, developer education sites and personal blogs.

👋 Thanks for reading

A picture of the author of this blog.

The goal of this blog is to create useful content for devs and share my own learnings.

My current passion project is to help devs learn how to use the OpenAI API.

Join my email list to hear about new content. No spam, unsubscribe at any time.