Làm việc với Tailwind trong NextJS

Trong NextJS, để tạo kiểu, bạn có thể sử dụng CSS framework Tailwind, framework thường được sử dụng cùng với React. Hãy cùng xem cách sử dụng nó.

Để làm việc với các kiểu Tailwind, cần có hai tệp: tailwind.config.js và postcss.config.js. Vì khi cài đặt dự án, chúng ta đã chọn mục "sử dụng kiểu Tailwind", các tệp này đã được tạo sẵn trong dự án của chúng ta và nằm ở thư mục gốc của nó. Nếu không có các tệp như vậy, thì bạn cần cài đặt Tailwind theo tài liệu chính thức.

Hãy thêm kiểu chữ đậm và màu vàng cho văn bản từ đoạn văn bằng cách sử dụng các kiểu Tailwind. Trong Tailwind CSS, các con số, được sử dụng trong các lớp cho màu sắc biểu thị cường độ hoặc sắc thái của màu. Các con số này thay đổi từ 50 đến 900. Đối với văn bản đoạn văn, hãy chọn một sắc thái trung bình:

export default function Test() {
	return <p className="font-bold text-yellow-500">
		text text text
	</p>;
}

Hãy thử sử dụng các kiểu Tailwind trong dự án của bạn.