Chúng ta có thể sử dụng tài liệu ui với tailwind css không?

Cho đến bây giờ, ứng dụng web tiến bộ này đang sử dụng Material-UI, một giao diện người dùng rất trưởng thành và phổ biến cũng như thư viện UX. Material UI là một trong những bộ công cụ React-UI được sử dụng nhiều nhất, nếu không muốn nói là số một và cung cấp một bộ sưu tập tuyệt vời các vùng chứa, thẻ, thanh điều hướng và tất cả các loại thành phần khác tuân thủ các nguyên tắc về Material do Google Design xác định

Vì tôi không thay đổi bố cục cốt lõi và thiết kế trực quan của ứng dụng web của mình, nên bạn có thể thắc mắc tại sao tôi lại chọn Material-UI ngay từ đầu, vì trang này thoạt nhìn không thực sự giống một trang Material-site điển hình. Lý do là thư viện “Material-UI” cũng cung cấp lớp thành phần cốt lõi để sử dụng, cung cấp tất cả các lợi thế của thư viện như chủ đề, mà không có kiểu Vật liệu cố chấp

Nhưng vì gần đây tôi đã bắt đầu sử dụng Tailwind, một “khung CSS ưu tiên tiện ích”, trong các dự án khác, nên tôi nhanh chóng nhận ra rằng những ưu điểm của Tailwind khiến nó trở thành ứng cử viên hàng đầu cho ứng dụng web cá nhân của tôi

mát mẻ mới. Gió cùng chiều. css

Tailwind có trải nghiệm thú vị tuyệt vời dành cho nhà phát triển. Nhưng không chỉ vậy, nó còn đảm bảo rằng bản dựng sản xuất chỉ sử dụng những lớp CSS thực sự được sử dụng. Nhờ có trình biên dịch tức thời hiện được cung cấp cùng với Tailwind. css, sử dụng công cụ linh hoạt hơn bao giờ hết

thư viện thay thế

Trước khi tôi đi vào chi tiết quá trình di chuyển từ Material-UI sang Tailwind. css, tôi sẽ viết ra danh sách các hệ thống thiết kế phù hợp cho Tailwind. css bao gồm MUI

• material-tailwind, dịch các thông số kỹ thuật thiết kế MUI sang một hệ thống thiết kế trong Tailwind. css
• daisy-ui, tất nhiên không phải là UI UI nhưng vẫn cung cấp một bộ thành phần rất lớn gần với tiêu chuẩn MUI phiên bản 5

Về cơ bản, bạn phải thêm tất cả các kiểu CSS cho Material-Tailwind dưới dạng nhập, cùng với các liên kết cho các biểu tượng cũng như phông chữ. Đối với Daisy-UI, tất cả những gì bạn phải làm là thêm nó làm plugin vào tệp confg của mình

Cả hai thư viện sẽ được giảm xuống theo kiểu bạn thực sự sử dụng, do đó chúng không thêm bất kỳ chi phí nào

Sự khác biệt giữa Material-UI và Tailwind. css

Một điểm khác biệt rõ ràng chính giữa hai thư viện là Material-UI cung cấp một kiểu cố định trong khi Tailwind. css cung cấp cho bạn một tập hợp các lớp tiện ích để tạo CSS, nhưng không có kiểu dáng cụ thể nào. Điều này có nghĩa là nếu bạn chủ yếu dựa vào Nguyên tắc về tài liệu, thì bạn sẽ phải xây dựng lại một số thành phần cốt lõi, chẳng hạn như các nút và trường văn bản, bằng Tailwind. css đầu tiên

Bởi vì cả hai thư viện đều sử dụng các đơn vị khác nhau cho các chức năng chia tỷ lệ và giãn cách, nên lần lặp lại đầu tiên của quá trình di chuyển không phá vỡ quy trình xây dựng trông khá lạc lõng

Nhìn chung, tôi mất khoảng 6 giờ mỗi đêm để chuyển sang Tailwind. css cho bản phát hành ổn định đầu tiên để xuất bản. Việc hoán đổi API của Material-UI được thực hiện nhanh hơn dự kiến ​​và ứng dụng web tiến bộ hiện chỉ dựa vào Tailwind cho tất cả các kiểu

Một màn trình diễn Ngọn hải đăng gần như hoàn hảo

Vì Material-UI đương nhiên lớn hơn Tailwind. css do thiếu tính năng thu nhỏ CSS cũng như chỉ giảm xuống chỉ CSS thực sự được sử dụng, tôi cũng đang nhắm đến điểm số cao hơn khi đo điểm chuẩn ứng dụng web với Lighthouse. Tôi chỉ sử dụng web. nhà phát triển/đo lường cho nhiệm vụ này, vì đây là công cụ khắt khe nhất liên quan đến hiệu suất mà người dùng cảm nhận được trong thế giới thực

Trước khi di chuyển, tất cả các trang web đều đạt 100 điểm ngoại trừ hiệu suất, trong đó tôi đạt khoảng 75 đến 80 điểm cho mỗi phép đo. Sau khi di chuyển, giờ đây tôi có thể báo cáo hiệu suất từ ​​90 đến 95 điểm, tùy thuộc vào hiệu suất mạng biên của Vercel, nơi PWA được lưu trữ. Cảm ơn Tailwind. css, bây giờ tôi gần đạt được số điểm hoàn hảo, điều này khá ấn tượng khi xem xét trang web sử dụng khá nhiều kiểu dáng (mặc dù có vẻ như rất tối thiểu) cũng như phương tiện như video và hình ảnh

Sự kết luận. nó có đáng không?

Vâng chắc chắn. Quá trình chuyển đổi tổng thể chỉ mất vài giờ và dẫn đến hiệu suất đạt được trong thế giới thực và điểm chuẩn tốt hơn. Tôi sẽ tinh chỉnh một số khía cạnh hình ảnh trong những tuần tiếp theo để giải quyết những mâu thuẫn tiềm ẩn sau quá trình di chuyển, nhưng nhìn chung, tôi cảm thấy tự tin với phiên bản hiện tại khi xây dựng sản xuất

Vật liệu-UI là gì? . Xây dựng hệ thống thiết kế của riêng bạn hoặc bắt đầu với Material Design. Các thành phần phản ứng để phát triển web nhanh hơn và dễ dàng hơn. Xây dựng hệ thống thiết kế của riêng bạn hoặc bắt đầu với Material Design

CSS Tailwind là gì? . Tailwind khác với các framework như Bootstrap, Foundation hoặc Bulma ở chỗ nó không phải là bộ giao diện người dùng. Nó không có chủ đề mặc định và không có thành phần giao diện người dùng tích hợp nào. Nó đi kèm với một menu gồm các tiện ích được thiết kế sẵn để xây dựng trang web của bạn, nhưng không áp đặt các quyết định thiết kế khó hoàn tác

Material-UI và Tailwind CSS thuộc danh mục "Front-End Frameworks" của ngăn xếp công nghệ

"Phản ứng" là lý do hàng đầu khiến hơn 51 nhà phát triển thích Material-UI, trong khi hơn 2 nhà phát triển đề cập đến "Khả năng tùy chỉnh cao" là lý do hàng đầu để chọn Tailwind CSS

Material-UI và Tailwind CSS đều là công cụ mã nguồn mở. Có vẻ như Material-UI với 48. 6K sao GitHub và 11K nhánh trên GitHub được chấp nhận nhiều hơn so với Tailwind CSS với 12. 9K sao GitHub và 586 nhánh GitHub

Theo cộng đồng StackShare, Material-UI được chấp thuận rộng rãi hơn, được đề cập trong 69 ngăn xếp của công ty & 80 ngăn xếp của nhà phát triển;

UI hay Tailwind CSS chất liệu nào tốt hơn?

Bạn có thể sử dụng CSS với giao diện người dùng vật liệu không?

Tôi có thể sử dụng Tailwind với vật liệu có góc cạnh không?

Tailwind CSS có phù hợp để sản xuất không?