Cách cài đặt và sử dụng Tailwind CSS trong ứng dụng Next.js
Nếu bạn muốn định kiểu cho ứng dụng của mình bằng một khung nhanh, linh hoạt và đáng tin cậy, thì Tailwind CSS là một lựa chọn tuyệt vời. Tailwind là một khung CSS giúp bạn thiết kế các thành phần web tùy chỉnh. Bạn có thể thiết kế các thành phần mà không cần phải chuyển đổi qua lại giữa các tệp HTML và CSS.
Không giống như Bootstrap, Tailwind không có các lớp được xác định trước. Thay vào đó, bạn có thể tùy chỉnh của riêng bạn. Với Tailwind, bạn có thể xây dựng các thành phần phức tạp với các tiện ích, chức năng và lệnh nguyên thủy.
Tìm hiểu cách cài đặt và sử dụng Tailwind để tạo giao diện người dùng tuyệt vời trong các dự án Next.js của bạn.
Mục Lục
Cài đặt Tailwind CSS trong Next.js
Bắt đầu bằng cách cài đặt Tailwind trong ứng dụng Next.js. Quá trình này tương tự như cài đặt Tailwind trong ứng dụng React, với một chút khác biệt trong quá trình cấu hình.
Truy cập trang cài đặt Tailwind CSS. Sau đó đi đến Hướng dẫn khung phần và chọn Tiếp theo.js. Phần này chứa tất cả các hướng dẫn bạn cần để thiết lập Tailwind trong dự án Next.js của mình.
Để cài đặt Tailwind qua npm, trình quản lý gói JavaScript, hãy chạy hai lệnh đầu cuối sau:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Các lệnh này tạo hai tệp cấu hình có tên tailwind.config.js Và postcss.config.js trong thư mục dự án gốc. Các tệp này cho biết rằng TailwindCSS đã được cài đặt thành công. Bạn cũng có thể cài đặt Tailwind CSS thông qua Tailwind CLI hoặc dưới dạng plugin PostCSS.
Định cấu hình mẫu
Sau khi cài đặt, bạn phải định cấu hình đường dẫn mẫu được cung cấp trong hướng dẫn cài đặt cho tệp cấu hình ứng dụng của mình. Thêm đoạn mã sau vào tập tin tailwind.config.js:
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Thêm Chỉ thị Tailwind vào Ứng dụng
Tiếp theo, hãy thêm các lệnh Tailwind sau vào tệp CSS ứng dụng của bạn. Đây là tập tin có tên toàn cầu.css. Bạn nên xóa nội dung của tệp global.css và thêm các lệnh Tailwind.
@tailwind base;@tailwind components;
@tailwind utilities;
Chạy quy trình xây dựng
Bây giờ, trên thiết bị đầu cuối, hãy chạy công cụ CLI bằng lệnh sau:
npm run dev
Lệnh này quét các tệp mẫu của bạn để tìm các lớp và xây dựng CSS của bạn. Nó sẽ mở một cổng để bạn xem trình duyệt.
Bây giờ, nếu bạn điều hướng đến máy chủ tại http://localhost:3000 bạn sẽ thấy ứng dụng của mình. Bạn sẽ nhận thấy một chút thay đổi trong nội dung. Điều này cho biết rằng quá trình cài đặt đã thành công và Tailwind CSS đang hoạt động.
Sử dụng Tailwind trong Dự án
Tiếp theo, hãy thử nghiệm các tính năng CSS của Tailwind bằng cách áp dụng các lớp cho dự án của bạn. Ví dụ: bạn có một ứng dụng có nội dung “Xin chào Tailwind”. Bạn muốn cung cấp cho nó một màu đỏ với nền màu xanh nhạt.
Tạo một Trang chủ.tsx tập tin sau đó thêm đoạn mã sau:
export default function Home() {
return (
<body className="bg-blue-300">
<h1 className='text-red-900'>Hello Tailwind CSS</h1>
</body>
);
}
Bây giờ, khi bạn điều hướng đến trình duyệt, bạn sẽ thấy văn bản chuyển sang màu đỏ và nền màu xanh lam.
Bạn có thể khám phá các tính năng CSS khác của Tailwind để tạo kiểu cho các thành phần khác trong ứng dụng của mình. Các công cụ sửa đổi có điều kiện cho phép bạn tạo các trạng thái phản ứng như di chuột và tiêu điểm. Bạn cũng có thể tùy chỉnh các trang của mình sang chế độ tối và sáng theo sở thích của người dùng.
Ưu điểm của việc sử dụng Tailwind CSS
Được tạo bởi Adam Wathan vào năm 2017, Tailwind CSS khác với các thư viện CSS khác ở nhiều điểm. Nó không có thời gian chạy, làm cho nó nhanh như chớp. Và rất dễ cài đặt. Tailwind quét tất cả các tệp HTML và thành phần JavaScript để tìm tên lớp trên ứng dụng của bạn. Sau đó, nó tạo ra các kiểu tương ứng để thiết kế các phần tử.
Tailwind CSS cho phép bạn thiết kế các thành phần phức tạp từ các tiện ích nguyên thủy. Bạn có thể sử dụng lại các kiểu trên các thành phần và sử dụng các công cụ sửa đổi để tạo kiểu cho giao diện người dùng đáp ứng. Sử dụng các bước tại đây để tìm hiểu cách cài đặt và sử dụng Tailwind CSS để tùy chỉnh ứng dụng phù hợp với thương hiệu của bạn.