In this guide, we will create a new Next.js project with the app directory, as well as set up Tailwind CSS that we will use to style our learning platform.

Creating a new Next.js project

To create a new next.js app with the new app directory, we will use the --experimental-app flag as the /app dir is still an experimental feature.

Open your terminal and navigate to your working directory for me it's cd ~/Documents/workspace/ then we'll run npx create-next-app@latest --experimental-app to create our project.

The script will ask us for the project name let's give it nextjs-learning-platform, then choose the default answers for other configurations.

Note: While answering the script configurations, make sure that we use TypeScript, ESLint, src/ dir, and @/* as an alias.

After the project is created, and its dependencies are installed, open the newly created project with your favorite editor.

By default Git is already initialized with an initial commit, so that's good, the next step is to set up Tailwind CSS and clean up the default home page.

Setting up Tailwind CSS

Go back to your terminal, and make sure you're inside the project directory (nextjs-learning-platform), then run npm install -D tailwindcss postcss autoprefixer to install tailwindcss dependencies.

Once the previous command is completed, go ahead and run npx tailwindcss init -p to initialize the configuration files for tailwind and postcss.

Now that we have installed and created the config files, we need to update the tailwind.config.js file with the following to tell tailwind what files it should include for its just-in-time compiler.

tailwind.config.js
JavaScript
/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ['./src/**/*.{js,ts,jsx,tsx}'],
	theme: {
		extend: {},
	},
	plugins: [],
};

For a more detailed tutorial check this Install Tailwind CSS with Next.js official guide.

Now it's time to include tailwind directives into our code source, to do first I like to use SCSS instead of just CSS.

To use sass first we need to install it as a dev dependency with npm install -D sass, then we'll rename src/app/globals.css to src/app/globals.scss, and finally update its import inside src/app/layout.tsx.

Now open src/app/globals.scss and delete all its content, replacing it with just TailwindCSS directives for now.

src/app/globals.scss
SCSS
@tailwind base;
@tailwind components;
@tailwind utilities;

Cleaning up our project

I like to always clean up the default content, and make it custom to my project, so in this section, we will change the head meta content, README.md, and add a simple h1 title on the home page.

Open src/app/head.tsx and change the <title> content to something like Next.js Learning Platform - For those who want to learn new skills and change the meta description to something similar.

src/app/head.tsx
TypeScript
export default function Head() {
	return (
		<>
			<title>
				Next.js Learning Platform - For those who want to learn new skills
			</title>
			<meta content="width=device-width, initial-scale=1" name="viewport" />
			<meta
				name="description"
				content="A Learning Platform for those who want to learn new skills"
			/>
			<link rel="icon" href="/favicon.ico" />
		</>
	);
}

Now, let's clean our homepage, and remove the CSS module file src/app/page.module.css

src/app/page.tsx
TypeScript
import { Inter } from '@next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function Home() {
	return (
		<main className={inter.className}>
			<div className="w-full mx-auto max-w-7xl">
				<h1 className="text-3xl">Welcome To Next.js Learning Platform</h1>
			</div>
		</main>
	);
}

One last touch I like is to create one config for Prettier, and another for vscode settings:

.vscode/settings.json
Json
{
	"editor.tabSize": 2,
	"editor.insertSpaces": false,
	"explorer.compactFolders": false,
	"typescript.tsdk": "node_modules/typescript/lib",
	"typescript.enablePromptUseWorkspaceTsdk": true
}

Feel free to ignore this one if you're not using vscode.

.prettierrc
Json
{
	"semi": false,
	"useTabs": true,
	"tabWidth": 2,
	"singleQuote": true,
	"trailingComma": "es5"
}

If you're curious please feel free to look up any one of them to see what they're doing but most of them are self-explanatory.

Before saving our change to Git, let's first run our app, and verify that we didn’t make any mistake by running npm run dev and opening http://localhost:3000/ in our browser.

Now, let's commit our changes to Git and move to the next guide: git add . to stage changed files. Then git commit -m "set up tailwindcss with sass, and clean up default content" to commit the changes.

Next, we'll work on Setting up Prisma using PostgreSQL provider with Next.js