Hôm qua ngồi làm project nhỏ cho một customer, mình lại rơi vào cái vòng lặp cũ của dân làm front: giữa viết CSS tay hay dùng Tailwind. Thật lòng mà nói, lúc mới học lợp code, mình thích viết CSS thuần lắm vì cảm giác mình kiểm soát tất cả, từng pixel, từng margin, padding đều nằm trong tay. Nhưng khi dự án to ra, file CSS dài gần nghìn dòng, việc tìm một class bị thừa hay xung đột trở thành cơn ác mộng.
Đến khi tiếp cận Tailwind CSS, mình thấy nó như một cú "gọi hồn" cho việc responsive design. Thay vì viết ra những đoạn media query cồng kềnh, mình chỉ cần thêm mấy class đơn giản vào HTML. Ví dụ, trước đây mình hay làm cái này:
Nhưng với Tailwind, nó gọn lẹ thế này:
<div class="container mx-auto px-4 sm:px-6 lg:px-8">Content here</div>
Chỉ cần nhìn vào class là biết ngay trên mobile nó có padding bao nhiêu, trên tablet ra sao, và trên desktop thì thế nào. Không cần mở file CSS ra tìm kiếm nữa, mọi thứ nằm ngay tại chỗ (inline). Điều này giúp team mình review code nhanh hơn nhiều, ai cũng hiểu ngay layout mà không cần đoán.
Tuy nhiên, mình cũng không phủ nhận những cái "nhược điểm" của Tailwind. Đó là file HTML sẽ bị "dơ" vì quá nhiều class, nhìn rối mắt người mới bắt đầu. Nhiều người bảo đây là cách làm "lười biếng", mất đi tư duy tách biệt giữa HTML và CSS. Nhưng với mình, đây là sự đánh đổi để đổi lấy tốc độ và tính nhất quán. Nếu bạn biết cách tùy chỉnh tailwind.config.js để định nghĩa lại màu sắc, font chữ hay spacing, thì file HTML vẫn rất gọn gàng và dễ bảo trì.
Tóm lại, nếu bạn đang loay hoay với việc make responsive, đặc biệt là khi phải tối ưu cho nhiều loại thiết bị, hãy thử chuyển sang Tailwind xem sao. Ban đầu có thể thấy hơi sốc vì lượng kiến thức cần nhớ, nhưng một khi đã quen, bạn sẽ không muốn quay lại viết CSS thuần cho các layout đơn giản nữa. Đây là trải nghiệm cá nhân, có thể không đúng với tất cả mọi người, nhưng chắc chắn nó đã thay đổi workflow của mình rất nhiều.