Cài đặt Tailwind CSS với Next.js

Thiết lập Tailwind CSS trong dự án Next.js.

Bắt đầu bằng cách tạo một dự án Next.js mới nếu bạn chưa thiết lập. Cách phổ biến nhất là sử dụng Create Next App.

Terminal

npx create-next-app@latest my-project --typescript --eslint --appcd my-project

Cài đặt @tailwindcss/postcss và các peer dependencies thông qua npm.

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Tạo file postcss.config.mjs ở thư mục gốc của dự án và thêm plugin @tailwindcss/postcss vào cấu hình PostCSS của bạn.

postcss.config.mjs

const config = {  plugins: {    "@tailwindcss/postcss": {},  },};export default config;

Thêm @import vào ./app/globals.css để import Tailwind CSS.

globals.css

@import "tailwindcss";

Chạy quá trình build với npm run dev.

Terminal

npm run dev

Bắt đầu sử dụng các utility class của Tailwind để style nội dung của bạn.

page.tsx

export default function Home() {  return (    <h1 className="text-3xl font-bold underline">      Hello world!    </h1>  )}