Sử dụng JIT Mode cho hiệu suất cao

Trong quá trình phát triển giao diện web, việc tối ưu hiệu suất build CSS là yếu tố quan trọng giúp cải thiện tốc độ phát triển và giảm kích thước file CSS. JIT (Just-In-Time) Mode của Tailwind CSS giúp bạn tạo ra lớp CSS theo nhu cầu ngay khi cần, thay vì build toàn bộ lớp CSS ngay từ đầu.

Bài học này sẽ hướng dẫn bạn cách kích hoạt JIT Mode và tối ưu build CSS trong dự án, giúp tăng hiệu suất và giảm thời gian build trong môi trường production.

Sử dụng JIT Mode cho hiệu suất cao

1. Giới thiệu JIT Mode trong Tailwind CSS

• JIT Mode là gì?

  • Tính năng mới của Tailwind CSS từ phiên bản 2.1 trở lên.
  • Tạo ra các lớp CSS ngay khi được sử dụng thay vì build sẵn toàn bộ.

• Lợi ích của JIT Mode:

  • Giảm kích thước file CSS.
  • Tăng tốc độ phát triển giao diện.
  • Hỗ trợ nhiều tính năng nâng cao như trạng thái động (hover:, focus:), media queries (sm:, lg:), và hơn thế nữa.

2. Cách bật JIT Mode trong Tailwind CSS

Bước 1: Cài đặt Tailwind CSS (nếu chưa có)

npm install tailwindcss
npx tailwindcss init

Bước 2: Kích hoạt JIT Mode
Mở file tailwind.config.js và cấu hình như sau:

module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx,html}'], // Đường dẫn tới các file cần quét class
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Bước 3: Thực hiện build CSS

npx tailwindcss -o output.css --watch

3. Tối ưu build CSS với JIT Mode

• Giảm kích thước file CSS bằng purge:
  Đảm bảo cấu hình purge trong file tailwind.config.js đúng đường dẫn cần thiết để loại bỏ các lớp CSS không sử dụng.

• Tối ưu với lớp CSS động:
  Ví dụ:

  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Hover me!
  </button>
  

Thực hành

Bài tập:

1. Kích hoạt JIT Mode cho một dự án Tailwind CSS có sẵn.
2. Thêm các lớp CSS động như hover:, focus:, lg: để kiểm tra khả năng tối ưu của JIT Mode.
3. Build và kiểm tra kích thước file CSS sau khi tối ưu.

Kết luận

Sau bài học này, bạn đã hiểu cách sử dụng JIT Mode của Tailwind CSS để cải thiện tốc độ phát triển và tối ưu hiệu suất sản phẩm. Kỹ thuật này không chỉ giúp bạn giảm kích thước file CSS mà còn tăng tốc độ phản hồi khi phát triển giao diện. Hãy áp dụng JIT Mode vào dự án của mình để đạt được hiệu quả cao nhất!