Giới thiệu về Tailwind CSS
Tailwind CSS là một framework CSS theo phong cách utility-first, cung cấp một bộ các class CSS nhỏ và dễ sử dụng. Chẳng hạn, class float-right tương ứng với float: right, trong khi text-red-500 đặt màu chữ thành đỏ với độ đậm 500. Tương tự, text-red-200 sử dụng màu đỏ nhạt hơn (độ đậm 200).
Tại sao Tailwind lại hữu ích?
Tailwind giúp tiết kiệm thời gian bằng cách cung cấp các utility class sẵn có và giảm thiểu nhu cầu sử dụng các file stylesheet riêng biệt. Điều này giúp bạn dễ dàng sao chép và dán HTML mà không làm mất đi giao diện mong muốn.
Thông thường, việc sao chép HTML giữa các dự án hoặc trang có thể làm phá vỡ giao diện vì các stylesheet hoặc thứ tự selector có thể không được sao chép cùng với markup. Với Tailwind, các style được nhúng trong các class trên chính các phần tử, vì vậy một component có thể được tái sử dụng ở nơi khác mà không gặp phải các vấn đề về style không mong muốn.
Cần có một pre-processor
Tailwind cung cấp rất nhiều utility class, nhưng trên thực tế, CSS cuối cùng của bạn chỉ bao gồm các class mà bạn thực sự sử dụng. Điều này giữ cho kích thước stylesheet được tạo ra rất nhỏ mặc dù có rất nhiều utility có sẵn.
Tuy nhiên, điều này có nghĩa là Tailwind yêu cầu một bước build: một công cụ quét các file nguồn của bạn và tạo ra một stylesheet chỉ chứa các utility mà bạn đã sử dụng. Công cụ này rất nhanh, nhưng việc thiết lập toolchain và cấu hình có thể là điểm trắc trở chính.
Jopi Rewrite tích hợp Tailwind sẵn
Jopi Rewrite là một framework server cho Node.js được tối ưu hóa cho hiệu suất tốt với Bun.js. Khi bạn sử dụng Jopi Rewrite, Tailwind CSS đã được tích hợp và cấu hình sẵn — không cần làm gì thêm.
Dự án mẫu sử dụng Tailwind
Để minh họa, chúng ta sẽ tạo một dự án đơn giản sử dụng Tailwind. Chúng ta sẽ sử dụng một trình tạo mẫu dự án để việc thiết lập diễn ra rất nhanh chóng.
Điều kiện tiên quyết:
- Phiên bản Node.js gần đây (LTS hiện tại, ví dụ v22.19 khi viết bài này).
- Tùy chọn cài đặt Bun.js để phát triển địa phương nhanh hơn (xem tại https://bun.sh).
Tạo dự án
Bạn có thể tạo dự án với lệnh sau:
npx jopi create minimal-router --dir myProjectNội dung dự án
Dự án được tạo là một starter tối thiểu, với:
- Khởi động server tại http://127.0.0.1:3000
- Phục vụ một trang chủ và một trang
/products
Các trang nằm dưới thư mục reactPages, nơi mà mỗi thư mục tương ứng với một route.
Tệp "reactPages/products/index.page.tsx"
Tệp này xuất một React component phục vụ tại http://127.0.0.1:3000/products.
Nếu bạn xem nội dung của nó, bạn sẽ tìm thấy mã như sau:
import React from "react";
import {usePageTitle} from "jopi-rewrite-ui";
export default function () {
usePageTitle("Products");
return <div className="flex flex-col items-center m-20">
<div className="text-gray-500">Trang sản phẩm</div>
<div className="text-red-300">TODO: thêm nhiều sản phẩm tuyệt vời!</div>
</div>
}Jopi Rewrite sử dụng SSR (Server-Side Rendering)
Jopi Rewrite sử dụng SSR, cho phép server render component React thành HTML để các trang có thể được lập chỉ mục bởi các công cụ tìm kiếm như Google. Khi HTML được tải trong trình duyệt, React sẽ làm mới markup — thay thế nó bằng một component React hoàn toàn tương tác.
Cách tiếp cận này mang lại thời gian tải trang nhanh và SEO tốt vì người dùng thấy nội dung có thể sử dụng ngay lập tức mà không cần chờ đợi JavaScript phía client tải và khởi tạo.
Kiểm tra dự án
Jopi Rewrite hỗ trợ hot-reloading cho các component React: chỉnh sửa mã React của bạn và trình duyệt sẽ tự động làm mới để hiển thị những thay đổi mới nhất khi công cụ phát hiện có sự thay đổi.
Hãy thử chỉnh sửa products/index.page.tsx và xem các cập nhật trong thời gian thực.
Bạn có thể chạy ứng dụng theo hai cách chính:
- Sử dụng Bun.js cho vòng lặp phát triển nhanh nhất (được khuyến nghị cho việc điều chỉnh giao diện).
- Sử dụng Node.js, có thể chậm hơn do việc biên dịch TypeScript.
Với Bun.js:
bun install
bun run start-bun-devVới Node.js:
npm install
npm run build
npm run start-bun-devKhi server đang chạy, mở http://127.0.0.1:3000/products.
Nội dung trang đến từ src/reactPage/products/index.page.tsx. Nếu bạn thay đổi tệp đó — đặc biệt là các class Tailwind — bạn nên thấy những thay đổi được phản ánh ngay lập tức trong trình duyệt. Điều này là một lợi ích lớn khi điều chỉnh giao diện.
Thực hành tốt nhất khi sử dụng Tailwind CSS
- Tổ chức class hợp lý: Nhóm các class liên quan lại với nhau để dễ dàng quản lý và đọc hiểu hơn.
- Sử dụng Plugin Tailwind: Khám phá các plugin có sẵn để mở rộng khả năng của Tailwind CSS.
- Tận dụng Dark Mode: Tích hợp dark mode cho giao diện người dùng của bạn bằng cách sử dụng các class điều kiện của Tailwind.
Những cạm bẫy thường gặp
- Quá nhiều class: Dễ dàng bị lạm dụng khi sử dụng quá nhiều class trong một phần tử, làm cho mã HTML trở nên khó đọc.
- Không tận dụng PurgeCSS: Nếu không cấu hình PurgeCSS đúng cách, bạn có thể tạo ra một file CSS quá lớn với nhiều class không sử dụng.
Mẹo tối ưu hiệu suất
- Sử dụng JIT Mode: Bật chế độ Just-In-Time để tạo ra các class CSS chỉ khi cần thiết, giúp giảm kích thước file CSS.
- Cấu hình đúng PurgeCSS: Đảm bảo rằng bạn đã cấu hình PurgeCSS để loại bỏ các class không sử dụng.
Giải quyết sự cố
- Class không hoạt động: Kiểm tra xem class có chính xác không hoặc đã được thêm vào file cấu hình Tailwind chưa.
- Xung đột với các styles khác: Đảm bảo không có xung đột giữa Tailwind và các styles khác trong dự án của bạn.
Kết luận
Bài viết này đã cung cấp cho bạn cái nhìn tổng quan về Tailwind CSS và cách sử dụng nó với Jopi Rewrite. Nếu bạn muốn tìm hiểu thêm về Tailwind CSS, hãy truy cập trang web của nó hoặc tham khảo tài liệu của Jopi Rewrite. Chúc bạn thành công trong việc phát triển giao diện web với Tailwind!
