Đây là bản lưu trữ lại kinh nghiệm khi làm việc với Tailwindcss mà trong thực tế mình thực hiện các dự án có gặp phải.
Tailwindcss là gì
Tailwindcss là 1 css framework giúp tạo giao diện website và tuỳ biến giao diện website thông qua các bộ class thay thế file css thường.
Chạy mượt với nhân chromium
Tailwindcss rất tối ưu cho các trình duyệt chạy nhân Chromium nên các trình duyệt như Chrome, brave, Cốc cốc,… được tối ưu tốt và dường như ko có lỗi vặt.
Tailwindcss đôi lúc sẽ bị “hóc xương” Safari
Thực sự thì safari có lẽ là gì đó anh em không thích rồi tuy nhiên nó vẫn là một trình duyệt được đông đảo anh em sử dụng nhất là “Ifan” lại không phải ít.
Trong thực tế khi sử dụng Safari đôi khi css không hiểu là bị xung đột hay chưa được tối ưu tốt nên nó không nhận css mặc dù bên chrome chạy ngon.
Tổng hợp các kinh nghiệm xử lý
- Lỗi không chạy
gap-khi dùng flex có justify
Ví dụ: Sử dụngflex justify-start gap-10thì ngay lập tứcgap-10sẽ không nhận css và lỗi ở đoạn này.Cách xử lý
Hãy sử dụngspace-x-10và bỏ ‘justify-start’ đi nhé chúng ta có:1
class="flex space-x-10"
- Lỗi không chạy
text-nowrap
Ví dụ: Sử dụngtext-nowrapcho các phần tử muốn đểmax-width: max-contentchúng ta không đạt được kết quả.Cách xử lý
Hãy sử dụng thêmwhite-space-prevàbreak-keepchúng ta có:1
class="white-space-pre break-keep"
- updating…