Tailwind CSS: Khung CSS và API tiện ích trên hết cho thiết kế nhanh chóng, đáp ứng

Khung CSS Tailwind

Mặc dù tôi nghiên cứu sâu về công nghệ hàng ngày, nhưng tôi không có nhiều thời gian vì tôi muốn chia sẻ những tích hợp và tự động hóa phức tạp mà công ty của tôi triển khai cho khách hàng. Ngoài ra, tôi không có nhiều thời gian khám phá. Hầu hết công nghệ tôi viết về là những công ty tìm kiếm Martech Zone bao gồm chúng, nhưng thỉnh thoảng - đặc biệt là qua Twitter - tôi thấy một số xôn xao xung quanh một công nghệ mới mà tôi cần chia sẻ.

Nếu bạn làm việc trong lĩnh vực thiết kế web, phát triển ứng dụng dành cho thiết bị di động hoặc thậm chí chỉ thiết lập hệ thống quản lý nội dung, có thể bạn đã phải vật lộn với sự thất vọng của các kiểu cạnh tranh trên nhiều bảng định kiểu. Ngay cả với các công cụ phát triển tuyệt vời được tích hợp trong mỗi trình duyệt, việc theo dõi và dọn dẹp CSS có thể đòi hỏi quá nhiều thời gian và năng lượng.

Khung CSS

Trong những năm gần đây, các nhà thiết kế đã thực hiện một công việc khá tuyệt vời khi phát hành các bộ sưu tập với phong cách đã được chuẩn bị sẵn và sẵn sàng sử dụng. Các CSS Stylesheets này được biết đến nhiều hơn với tên gọi CSS Frameworks, cố gắng đáp ứng tất cả các kiểu và khả năng đáp ứng khác nhau để các nhà phát triển chỉ có thể tham khảo một framework thay vì xây dựng một tệp CSS từ đầu. Một số khuôn khổ phổ biến là:

  • bootstrap - một khuôn khổ đã phát triển hơn một thập kỷ, được giới thiệu lần đầu tiên bởi Twitter. Nó cung cấp vô số tính năng. Nó có nhược điểm, yêu cầu SASS, khó ghi đè, phụ thuộc vào JQquery và tải khá nặng.
  • tìm thấy - một khung công tác sạch, thân thiện với nhà phát triển và không phụ thuộc vào JavaScript.
  • Nền tảng - một khuôn khổ CSS chung chung và hữu dụng hơn có rất nhiều thành phần có thể dễ dàng tùy chỉnh. Ngoài ra, có Nền tảng cho EmailGiao diện người dùng chuyển động cho hình ảnh động.
  • Bộ giao diện người dùng - sự kết hợp của HTML, JavaScript và CSS để giúp giao diện người dùng của bạn được phát triển một cách nhanh chóng và dễ dàng.

Khung CSS Tailwind

Trong khi các khung công tác khác thực hiện rất tốt việc cung cấp các phần tử giao diện người dùng phổ biến, Tailwind sử dụng một phương pháp được gọi là CSS nguyên tử. Tóm lại, Tailwind đã khéo léo sắp xếp các tên lớp bằng cách sử dụng ngôn ngữ tự nhiên để thực hiện những gì họ nói. Vì vậy, mặc dù Tailwind không có thư viện các thành phần, nhưng khả năng dễ dàng xây dựng một giao diện mạnh mẽ, đáp ứng chỉ bằng cách tham chiếu các tên lớp CSS là trang nhã, nhanh chóng và không thể so sánh được.

Dưới đây là một số ví dụ thực sự tuyệt vời:

Lưới CSS

cột css bắt đầu lưới các cột

CSS Gradients

gradient css

CSS hỗ trợ chế độ tối

css chế độ tối

Tailwind cũng có một điều tuyệt vời phần mở rộng có sẵn cho VS Code để bạn có thể dễ dàng xác định và chèn các lớp từ trình soạn thảo mã của Microsoft.

Khéo léo hơn nữa, Tailwind tự động xóa tất cả CSS không sử dụng khi xây dựng để sản xuất, có nghĩa là gói CSS cuối cùng của bạn là gói nhỏ nhất có thể. Trên thực tế, hầu hết các dự án Tailwind gửi ít hơn 10kB CSS cho khách hàng.

Bạn nghĩ gì?

Trang web này sử dụng Akismet để giảm spam. Tìm hiểu cách xử lý dữ liệu nhận xét của bạn.