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.
1npx create-next-app@latest landing-page
2cd landing-page
Initialize TailwindCSS.
1npm install --save-dev tailwindcss postcss autoprefixer
2npx tailwindcss init -p
You should now see two files in your root project:
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:
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:
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
Commit your changes to the repository.
1git add .
2git commit -m "style(core): add tailwindcss"
You're ready to go. Run your application and start designing your landing page.
1npm run dev