August 12 2022

How to set up a landing page with Next.js

This guide will walk you through creating a landing page using one of the most popular web frameworks today, Next.js, and TailwindUI, a component library by the creators of TailwindCSS.

Requirements

Role: Developer
Difficulty: Novice
Time: 20min

Walkthrough

Create a new Next.js application in a directory of your choice.

Code

1npx create-next-app@latest landing-page
2cd landing-page

Initialize TailwindCSS.

Code

1npm install --save-dev tailwindcss postcss autoprefixer
2npx tailwindcss init -p

You should now see two files in your root project:

Code

1landing-page/
2  ...
3  tailwind.config.js
4  postcss.config.js
5  ...

The tailwind.config.js file contains the Tailwind configuration. We will adjust this to make TailwindCSS compatible with Next.js. Edit the tailwind.config.js file to reflect the following changes:

Code

1/** @type {import('tailwindcss').Config} */
2module.exports = {
3  content: [
4    "./pages/**/*.{js,ts,jsx,tsx}",
5    "./components/**/*.{js,ts,jsx,tsx}",
6  ],
7  theme: {
8    extend: {},
9  },
10  plugins: [],
11}

The postcss.config.js file contains the PostCSS configuration, which you don't need to modify in this case.Import TailwindCSS in the global styles of our Next.js project. This happens by removing all existing styles in the globals.css and replacing them with Tailwind directives:

Code

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Commit your changes to the repository.

Code

1git add .
2git commit -m "style(core): add tailwindcss"

You're ready to go. Run your application and start designing your landing page.

Code

1npm run dev