Làm chủ CSS Tailwind với chế độ Just-in-time (JIT)

Các khuôn khổ ưu tiên tiện ích giúp chúng tôi thiết kế các trang web của mình nhanh hơn và Tailwind CSS đã trở thành một trong những khuôn khổ phổ biến nhất. Nhưng nổi tiếng không có nghĩa là hoàn hảo.

Có một vài thách thức khi sử dụng Tailwind CSS, chẳng hạn như có một biểu định kiểu lớn trong quá trình phát triển và phải tự kích hoạt các biến thể bổ sung của riêng chúng tôi, trong số những biến thể khác. Giải pháp cho một số thách thức này sẽ là trọng tâm chung của chúng tôi trong hướng dẫn này.

Trong hướng dẫn này, chúng ta sẽ nói về một tính năng rất quan trọng của khung CSS Tailwind được gọi là trình biên dịch kịp thời, thường được gọi là trình biên dịch JIT.

Chúng tôi sẽ nêu bật các tính năng và lợi ích của việc sử dụng trình biên dịch Tailwind CSS JIT, cách kích hoạt nó và xem một số ví dụ thực tế.

Bắt đầu nào.

Trình biên dịch Tailwind CSS JIT (Just-in-Time) là gì?

Trước khi nói về trình biên dịch kịp thời, trước tiên chúng ta cần nói về Tailwind CSS.

Tailwind CSS là một khung CSS ưu tiên tiện ích với một tập hợp các lớp CSS được xác định trước có thể được áp dụng trực tiếp trong đánh dấu của chúng tôi để tăng tốc thiết kế các trang web và duy trì tính nhất quán trong thiết kế bằng cách sử dụng các hệ thống được xác định trước.

Trước khi phát hành trình biên dịch JIT, kích thước tệp Tailwind CSS được tạo của chúng tôi sau khi cài đặt thường tối đa 3 MB. Tuy nhiên, khi bạn tiếp tục định cấu hình và tùy chỉnh Tailwind, kích thước tệp tiếp tục lớn hơn – trong một số trường hợp, bạn có thể kết thúc bằng một biểu định kiểu lớn tới 15 MB.

Mặc dù tất cả các kiểu không sử dụng của chúng tôi sẽ bị xóa trong quá trình sản xuất, nhưng đây không phải là trường hợp trong quá trình phát triển. Với một biểu định kiểu lớn tới 10 MB hoặc thậm chí 20 MB, chúng tôi chắc chắn sẽ gặp sự cố và khiến các công cụ dành cho nhà phát triển của chúng tôi bị chậm lại.

Với trình biên dịch JIT, các kiểu được tạo ra khi chúng tôi xây dựng các dự án của mình. Điều này có nghĩa là chỉ các lớp tiện ích mà bạn đang sử dụng mới được đưa vào kích thước của biểu định kiểu của bạn, không phải tất cả các lớp tiện ích đi kèm với Tailwind CSS.

Lợi ích của việc sử dụng Chế độ JIT CSS Tailwind

Trong phần này, chúng ta sẽ thảo luận về một số lợi ích của việc sử dụng trình biên dịch JIT. Chúng bao gồm:

1. Bảng định kiểu của bạn giống nhau trong quá trình phát triển và sản xuất.
2. Thời gian xây dựng nhanh hơn.
3. Tất cả các biến thể được bật theo mặc định.
4. Quá trình biên dịch trong quá trình phát triển nhanh hơn nhiều.
5. Chỉ các kiểu đã sử dụng mới được tạo.
6. Các biến thể có thể được xếp chồng lên nhau.
7. Cải thiện hiệu suất của các công cụ dành cho nhà phát triển.

Hạn chế của việc sử dụng trình biên dịch JIT CSS Tailwind

Các hạn chế hiện đã biết theo tài liệu GitHub của trình biên dịch JIT là:

• Tùy chọn PurgeCSS nâng cao không được hỗ trợ.
• “Bạn chỉ có thể @apply các lớp là một phần của lõi, được tạo bởi các plugin hoặc được định nghĩa trong @layer luật lệ. Bạn không thể @apply các lớp CSS tùy ý không được xác định trong @layer luật lệ.”
• Chỉ có hỗ trợ cho PostCSS 8.

Các @apply Chỉ thị được sử dụng để áp dụng các lớp tiện ích trong CSS tùy chỉnh của chúng tôi. Điều này rất hữu ích khi chúng tôi đang xác định các kiểu CSS tùy chỉnh nhưng muốn sử dụng một số lớp tiện ích đã được xác định. Dưới đây là một ví dụ về cách @apply chỉ thị hoạt động:

.my-custom-css {
  @apply text-green-500;
}

Trong đoạn mã trên, chúng tôi đã thêm màu xanh lục vào một lớp CSS tùy chỉnh. Màu xanh lá cây đã được áp dụng bằng cách sử dụng một lớp tiện ích Tailwind.

Tìm hiểu về một tính năng rất quan trọng của khung CSS Tailwind, được gọi là trình biên dịch kịp thời, trong hướng dẫn hữu ích này 🚀.Nhấp để Tweet

Cách bật Chế độ JIT CSS Tailwind

Lưu ý rằng tại thời điểm viết bài, Tailwind CSS phiên bản 3 đã được phát hành và được bật theo mặc định khi bạn cài đặt Tailwind CSS. Các giải thích bên dưới để bật trình biên dịch JIT không áp dụng cho phiên bản 3 trở lên. Mọi ví dụ khác được đề cập trong hướng dẫn này đều tương thích với phiên bản 3.

Khá dễ dàng để kích hoạt trình biên dịch JIT. Tất cả những gì bạn phải làm là cập nhật tệp tailwind.config.js của mình bằng cách thêm thuộc tính mode sẽ có giá trị là ‘jit’.

Đây là giao diện tailwind.config.js của bạn:

module.exports = {
  mode: 'jit',
  purge: ['./public/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Dòng cần tập trung vào là phần mà chúng tôi đã thêm:

mode: 'jit'

Điều này cho phép chúng tôi sử dụng các tính năng của trình biên dịch JIT.

Sau khi hoàn tất, bạn có thể chạy lệnh xây dựng và thấy kích thước tệp của mình giảm dần. Những kiểu duy nhất bạn sẽ thấy sẽ là những kiểu bạn đang sử dụng.

Với kích thước tệp giảm, biểu định kiểu của bạn trong quá trình phát triển và sản xuất sẽ giống nhau. Khả năng tụt hậu của các công cụ dành cho nhà phát triển cũng sẽ được giảm đến mức tối thiểu và mã của bạn biên dịch nhanh hơn khi bạn xây dựng các dự án của mình.

Tiếp theo, chúng ta sẽ xem một số ứng dụng thực tế của trình biên dịch JIT.

Điều này cho phép chúng tôi sử dụng các tính năng của trình biên dịch JIT.

Sau khi hoàn tất, bạn có thể chạy lệnh xây dựng và thấy kích thước tệp của mình giảm dần. Những kiểu duy nhất bạn sẽ thấy sẽ là những kiểu bạn đang sử dụng.

Với kích thước tệp giảm, biểu định kiểu của bạn trong quá trình phát triển và sản xuất sẽ giống nhau. Khả năng tụt hậu của các công cụ dành cho nhà phát triển cũng sẽ được giảm đến mức tối thiểu và mã của bạn biên dịch nhanh hơn khi bạn xây dựng các dự án của mình.

Tiếp theo, chúng ta sẽ xem một số ứng dụng thực tế của trình biên dịch JIT.

Cách sử dụng Trình biên dịch JIT CSS Tailwind

Chúng ta sẽ xem một số ví dụ thực tế về trình biên dịch JIT trong phần này. Chúng tôi sẽ bắt đầu với các giá trị tùy ý giúp chúng tôi mở rộng hệ thống thiết kế của Tailwind.

Giá trị tùy ý

Các trường hợp có thể phát sinh khi chúng tôi muốn sử dụng các giá trị bên ngoài hệ thống thiết kế đã được tạo. Các giá trị này có thể dành cho màu sắc, phần đệm, lề, chiều rộng, v.v. của chúng tôi.

Trình biên dịch JIT cho phép chúng tôi đạt được điều này với việc sử dụng các giá trị tùy ý. Các giá trị tùy ý này cho phép chúng tôi thoát ra khỏi hệ thống thiết kế và xác định các giá trị tùy chỉnh của riêng chúng tôi. Bạn sẽ thấy các giá trị này trong cú pháp sau: [300px], [#FA8072].

Để làm được điều này, chúng tôi phải lồng giá trị trong dấu ngoặc vuông để Tailwind biết chúng tôi đang xác định giá trị mới trong hệ thống thiết kế của mình. Đây là một ví dụ bên dưới:

<div class="mt-[300px] w-[500px]">
</div>

Trong ví dụ trên, chúng tôi đã sử dụng hai giá trị mới – 300px và 500px – ban đầu không tồn tại trong hệ thống thiết kế. Trước trình biên dịch JIT, trước tiên bạn có thể phải xác định các giá trị này trong tệp config.js để đạt được hiệu quả tương tự.

Ví dụ tiếp theo cho thấy cách bạn có thể xác định các giá trị màu mới như:

<p class="bg-[#FA8072] ">This paragraph has a salmon background </p>

Ở đây, chúng tôi đã tạo một đoạn văn với màu nền cá hồi. Bạn sẽ không thấy lớp tiện ích Tailwind cho biết bg-cá hồi, nhưng chúng tôi có thể xác định điều này bằng cách sử dụng một giá trị tùy ý.

Biến thể xếp chồng

Với trình biên dịch JIT, tất cả các biến thể được bật theo mặc định, vì vậy bạn có thể quên việc sử dụng tệp config.js để bật bất kỳ biến thể nào. Ngoài ra, các biến thể có thể được xếp chồng lên nhau để đạt được kết quả tuyệt vời.

Mỗi biến thể được phân tách bằng dấu hai chấm.

Đây là một ví dụ:

<button class="sm:dark:disabled:focus:hover:bg-blue-300">

Đoạn mã trên tạo một nút có thuộc tính tiêu điểm bị tách biệt và chuyển sang màu xanh lam khi di chuột vào.

Yếu tố giả

Trình biên dịch JIT cho phép chúng ta tạo kiểu phần tử giả. Phần tử giả được sử dụng để tạo kiểu cho các phần cụ thể của phần tử như tạo kiểu chữ cái đầu tiên của phần tử hoặc chèn nội dung vào trước / sau phần tử.

Đây là vài ví dụ:

<p class="first-letter:bg-green-600">
First letter will have a green color
</p>

Trong ví dụ trên, chữ cái đầu tiên “M” sẽ có màu xanh lục.

<p class="selection:bg-green-600">
Highlight this text to see a green color.
</p>

Khi bạn đánh dấu văn bản từ đoạn mã trên, nó sẽ có màu nền xanh lục.

Màu đường viền mỗi bên

Do cân nhắc về kích thước tệp, tính năng này ban đầu bị loại bỏ, nhưng điều đó đã thay đổi khi phát hành trình biên dịch JIT. Chúng tôi có thể cung cấp cho mỗi đường viền một màu sắc khác nhau.

Hãy xem một ví dụ về điều này:

<div class="border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400">
</div>

Chúng tôi đã cung cấp cho div của mình nhiều màu đường viền – đường viền trên cùng là màu đỏ, đường viền bên phải màu xanh lam, đường viền phía dưới màu vàng và đường viền bên trái là màu xanh lá cây.

Chế độ JIT trong Tailwind CSS Phiên bản 3

Từ Tailwind CSS phiên bản 3 trở lên, trình biên dịch JIT được bật theo mặc định khi chúng tôi cài đặt Tailwind CSS, vì vậy chúng tôi không phải lo lắng về việc thay đổi bất kỳ thứ gì trong tailwind.config.js tập tin. Điều này cho phép chúng tôi truy cập tất cả các tính năng của trình biên dịch JIT khi đang di chuyển. Tất cả những gì chúng tôi phải làm là làm theo hướng dẫn cài đặt cho phiên bản hiện tại và chúng tôi đang tắt và chạy.

Trình biên dịch JIT là gì … và nó có thể cải thiện trang web của bạn như thế nào? Hướng dẫn này có câu trả lời ✅Nhấp để Tweet

Tóm lược

Trình biên dịch JIT đã đưa khung CSS Tailwind lên một cấp độ hoàn toàn mới. Bản phát hành của nó đi kèm với các tính năng hữu ích mới để làm cho việc sử dụng khuôn khổ của chúng tôi tốt hơn. Chúng tôi không còn phải lo lắng về kích thước tệp của mình quá nặng, chúng làm cho các công cụ dành cho nhà phát triển của chúng tôi bị tụt hậu, vì chỉ những kiểu chúng tôi thực sự sử dụng mới được tạo ra, tất cả đều đang di chuyển.

Chúng tôi đã thấy một vài ví dụ về các tính năng mới như biến thể xếp chồng, phần tử tạo kiểu sử dụng phần tử giả, sử dụng các giá trị tùy ý để mở rộng hệ thống thiết kế của chúng tôi và tính năng rất được yêu cầu – khả năng tạo kiểu riêng cho từng bên của đường viền của phần tử. Chúng tôi chưa đạt đến những giới hạn về khả năng JIT của Tailwind ở đây, vì vậy các bước tiếp theo của bạn sẽ là tự kiểm tra và khám phá cách bạn có thể khai thác tốt nhất các tính năng của JIT cho công việc của mình.

Bạn đã xây dựng được những thứ hay ho nào bằng cách sử dụng trình biên dịch JIT? Chia sẻ suy nghĩ của bạn trong phần bình luận bên dưới.