Creating a Next.js Project with Tailwind Typography and Shadcn

📅

loading..🐩🐩🐩🐩

Before getting started 🔗

Let's set up the basics for developing the blog.

This post covers the following configuration.

👨‍💻

You need Node.js 18 or later and npm installed.

Run the following command to create a Next.js project.

npx create-next-app@latest

I used the defaults for every setting.

Once the project has been created, run the following commands to install or update the additional packages to their latest versions.

cd {프로젝트 이름}
npm install next@latest react@latest react-dom@latest

Run the following command to start the project.

npm run dev

Once the project is running, open http://localhost:3000↗ in your browser to see the following screen.

This page is rendered from the `src/app/page.tsx` file.

Shadcn/ui is a UI library that uses Tailwind CSS.

Run the following commands to install Shadcn/ui.

tailwind-merge is a plugin used by Shadcn/ui.

npx shadcn-ui@latest init
npm i tailwind-merge

I proceeded with the default settings.

Tailwind CSS is configured by default when you create the Next.js project.

However, Tailwind CSS resets HTML element styles, so those styles will not be present when rendering Markdown files later.

The prose option addresses this.

The prose option uses the tailwindcss/typography plugin to apply styles to rendered Markdown.

Run the following command to install the tailwindcss/typography plugin.

npm i @tailwindcss/typography

Open tailwind.config.ts and add the plugin as follows.

tailwind.config.ts

module.exports = {
	// ...
	plugins: [
		require('@tailwindcss/typography'),
		// ...
	],
	// ...
}

Creating a Next.js Project with Tailwind Typography and Shadcn | PromleeBlog