Sử dụng calc() trong Tailwind CSS

Đôi khi bạn cần thực hiện các phép tính với hàm calc() mặc định trong CSS khi sử dụng Tailwind CSS để thiết lập chiều cao, chiều dài cho phần tử. Tailwind CSS từ phiên bản v2.1+ cung cấp JIT mode giúp ta có thể làm điều này một cách dễ dàng.

Thiết lập

Nếu bạn đang sử dụng Tailwind CSS v2.1+, thì bạn cần kích hoạt JIT mode mới có thể sử dụng tính năng này. Nếu đang sử dụng phiên bản Tailwind CSS v3.x trở lên thì bạn có thể bỏ qua bước này vì mặc định nó được kích hoạt sẵn chế độ này.

Để kích hoạt JIT mode, ta mở file tailwind.config.js và thêm đoạn code sau:

 module.exports = {
+  mode: "jit", 
   purge: [],
   theme: {},
 };

Để biết thêm thông tin chi tiết về JIT mode, xem thêm tại Just-in-Time Mode .

Cách sử dụng

Các bạn có thể viết trực tiếp ngay trên thẻ HTML

<div class="h-[calc(100vh-2rem)]">...</div>

hoặc thông qua @apply trên CSS

.sidebar {
  @apply h-[calc(100vh-2rem)];
}

Tailwind CSS sẽ biên dịch cú pháp của chúng ta như sau:

.h-\[calc\(100vh-2rem\)\] {
  height: calc(100vh - 2rem);
}

Lưu ý rằng cú pháp KHÔNG chứa khoảng trắng.

Nếu bạn đang sử dụng Tailwind v3.x trở lên, chúng ta có thể thay thế khoảng trắng bằng ký tự _ để code dễ đọc hơn.

<div class="h-[calc(100vh_-_2rem)]">...</div>

Ngoài ra, chúng ta có thể sử dụng các biến built-in theme của Tailwind CSS.

<div class="h-[calc(100vh_-_theme(space.8))]">...</div>

Tổng kết

Hi vọng qua bài viết này giúp các bạn phần nào trong quá trình làm việc với Tailwind CSS, đặc biệt trong các trường hợp sử dụng hàm calc() để tính toán. Cảm ơn các bạn đã quan tâm theo dõi, hẹn gặp lại!