UI hay Tailwind CSS chất liệu nào tốt hơn? ✅ 2023
Kinh Nghiệm Hướng dẫn UI hay Tailwind CSS vật liệu nào tốt hơn? 2022
Bùi Minh Chính đang tìm kiếm từ khóa UI hay Tailwind CSS vật liệu nào tốt hơn? được Update vào lúc : 2022-12-21 21:30:12 . Với phương châm chia sẻ Thủ Thuật về trong nội dung bài viết một cách Chi Tiết 2022. Nếu sau khi Read tài liệu vẫn ko hiểu thì hoàn toàn có thể lại Comments ở cuối bài để Mình lý giải và hướng dẫn lại nha.Cho đến giờ đây, ứng dụng web tiến bộ này đang sử dụng Material-UI, một giao diện người tiêu 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 thích nói là số một và đáp ứng một bộ sưu tập tuyệt vời những vùng chứa, thẻ, thanh điều hướng và tất cả nhiều chủng loại thành phần khác tuân thủ những nguyên tắc về Material do Google Design xác định
Nội dung chính Show- thoáng mát mới. Gió cùng chiều. cssthư viện thay thếSự khác lạ giữa Material-UI và Tailwind. cssMột màn trình diễn Ngọn hải đăng gần như thể hoàn hảoPhần kết luận. nó có đáng không?Sử dụng thư viện BootstrapKhả năng truy cập trong BootstrapHơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơnMở rộng BootstrapCác nội dung bài viết hay khác từ LogRocketGiao diện người tiêu dùng vật liệu (MUI) cho ReactSử dụng thiết kế vật liệuKhả năng truy cập trong Thiết kế Vật liệu và những thư viện như MUIMở rộng Material Design với MUIMở rộng thiết kế vật liệu với VuetifyCSS đuôi gióSử dụng CSS TailwindKhả năng truy cập trong Tailwind CSSSử dụng Bootstrap với Tailwind hoặc MUIPhần kết luậnGiao diện người tiêu dùng của bạn có ngốn CPU của người tiêu dùng không?Tôi có nên sử dụng Tailwind CSS với material UI không?Có đáng để sử dụng Tailwind CSS không?CSS Tailwind có tốt cho những dự án công trình bất Động sản lớn không?Tôi hoàn toàn có thể sử dụng MUI và Tailwind cùng nhau không?
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 tớ, nên bạn hoàn toà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 đáp ứng lớp thành phần cốt lõi để sử dụng, đáp ứng tất cả những lợi thế của thư viện như chủ đề, mà không còn kiểu Vật liệu cố chấp
Nhưng vì mới gần đây tôi đã khởi đầu sử dụng Tailwind, một “khung CSS ưu tiên tiện ích”, trong những dự án công trình bất Động sản khác, nên tôi nhanh gọn nhận ra rằng những ưu điểm của Tailwind khiến nó trở thành ứng cử viên số 1 cho ứng dụng web thành viên của tôi
thoáng mát mới. Gió cùng chiều. css
Tailwind có trải nghiệm thú vị tuyệt vời dành riêng cho nhà phát triển. Nhưng không dừng lại ở đó, nó còn đảm nói 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 đáp ứng 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 rõ ràng quá trình di tán từ Material-UI sang Tailwind. css, tôi sẽ viết ra list những khối mạng lưới hệ thống thiết kế phù hợp cho Tailwind. css gồm có MUI
- material-tailwind, dịch những thông số kỹ thuật thiết kế MUI sang một khối mạng lưới hệ thống thiết kế trong Tailwind. cssdaisy-ui, tất nhiên không phải là UI UI nhưng vẫn đáp ứng 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ả những kiểu CSS cho Material-Tailwind dưới dạng nhập, cùng với những link cho những hình 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 tớ
Cả hai thư viện sẽ được hạ xuống theo kiểu bạn thực sự sử dụng, do đó chúng không thêm bất kỳ ngân sách nào
Sự khác lạ giữa Material-UI và Tailwind. css
Một điểm khác lạ rõ ràng ở chính giữa hai thư viện là Material-UI đáp ứng một kiểu cố định và thắt chặt trong khi Tailwind. css đáp ứng cho bạn một tập hợp những lớp tiện ích để tạo CSS, nhưng không còn mẫu mã rõ ràng nào. Điều này nghĩa là nếu bạn đa phần nhờ 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ố trong những thành phần cốt lõi, ví dụ như những 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 những đơn vị rất khác nhau cho những hiệu suất cao 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 tá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 chừ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ỉ nhờ vào Tailwind cho tất cả những kiểu
Một màn trình diễn Ngọn hải đăng gần như thể hoàn hảo nhất
Vì Material-UI đương nhiên to hơn Tailwind. css do thiếu tính năng thu nhỏ CSS cũng như chỉ hạ 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 trách nhiệm này, vì đây là công cụ khắt khe nhất liên quan đến hiệu suất mà người tiêu dùng cảm nhận được trong thế giới thực
Trước khi di tán, tất cả những trang web đều đạt 100 điểm ngoại trừ hiệu suất, trong đó tôi đạt khoảng chừng 75 đến 80 điểm cho từng phép đo. Sau khi di tán, giờ đây tôi hoàn toàn 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 tàng trữ. Cảm ơn Tailwind. css, giờ đây tôi gần đạt được số điểm hoàn hảo nhất, điều này khá ấn tượng khi xem xét trang web sử dụng quá nhiều phong cách dáng (tuy nhiên có vẻ như như rất tối thiểu) cũng như phương tiện như video và hình ảnh
Phần kết luận. nó có đáng không?
Vâng chắc như đinh. Quá trình quy đổ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ố trong những khía cạnh hình ảnh trong những tuần tiếp theo để xử lý và xử lý những xích míc tiềm ẩn sau quá trình di tá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
Ghi chú của sửa đổi và biên tập viên. Bài đăng này đã được update vào ngày 20 tháng 7 năm 2022 để gồm có thông tin liên quan đến những phiên bản Bootstrap, Tailwind CSS và MUI tiên tiến nhất, cũng như để thêm phần thảo luận
Xây dựng ứng dụng lối vào của bạn mà không cần nhờ vào thư viện hiện có là vấn đề tuyệt vời. Nhưng học cách triển khai những thư viện không riêng gì có giúp bạn tiết kiệm thời gian — nó còn tương hỗ bạn xây dựng những bố cục đối xứng và rõ ràng mà không cần tốn nhiều công sức của con người. Tất cả những thư viện này đều được xây dựng với hiệu suất cao đa trình duyệt
Mặc dù có rất nhiều thư viện giao diện người tiêu dùng ngoài kia, nhưng có rất nhiều sự khác lạ giữa mỗi thư viện, từ kĩ năng truy cập đến kĩ năng mở rộng, trong số những tiêu chí khác
Bài viết này sẽ xác định sự khác lạ ở chính giữa ba thư viện UI phổ biến. Bootstrap, Material UI (MUI) và Tailwind CSS
Những gì chúng tôi sẽ gồm có
Bootstrap
Bootstrap ban đầu được phát triển bởi Mark Otto và Jacob Thornton khi cả hai đang thao tác tại . Phiên bản đầu tiên ban đầu được phát hành vào thứ Sáu, ngày 19 tháng 8 năm 2011
Kể từ khi phát hành, thư viện đã thu hút được rất nhiều sự để ý quan tâm trong hiệp hội nhà phát triển, với khoảng chừng 160 nghìn sao trên Github tại thời điểm viết bài này và hơn 1000 cộng tác viên tích cực
Bootstrap lúc đầu sử dụng bộ sưu tập thiết kế CSS và jQuery tùy chọn cho những thành phần của nó. Tuy nhiên, phiên bản mới gần đây nhất, Bootstrap 5, đã bỏ tương hỗ jQuery để chuyển sang tương hỗ JavaScript vanilla (thuần túy)
Sử dụng thư viện Bootstrap
Tích hợp Bootstrap vào một dự án công trình bất Động sản mới hoặc dự án công trình bất Động sản hiện có thật thuận tiện và đơn giản. Bạn hoàn toàn có thể khởi đầu bằng phương pháp gồm có CDN của nó hoặc tải xuống những tệp nguồn của nó và link chúng trong trang đánh dấu của bạn
Cộng đồng nhà phát triển cũng nỗ lực giúp đưa Bootstrap đến với tất cả những khung giao diện người tiêu dùng, gồm có React, Vue. js và Svelte
BootstrapVueBootstrapVue giúp bạn xây dựng những ứng dụng bằng Vue. js và Bootstrap 4. Nó đáp ứng những triển khai toàn diện nhất cho những thành phần Bootstrap 4 và khối mạng lưới hệ thống lưới, nhưng tương hỗ cho Bootstrap 5 hiện vẫn đang được phát triển
Ngoài những thành phần Bootstrap cốt lõi, BootstrapVue gồm có những tính năng tương hỗ update như bộ tải khung và những thành phần tải chậm hình ảnh. Nó cũng luôn có thể có tính năng tương hỗ vượt trội cho những hình tượng Bootstrap
phản ứng, nhưng đối với React. js. Tuy nhiên, không in như BootstrapVue, thư viện này sẽ không tương hỗ những hình tượng Bootstrap thông thường. Ngoài ra, không còn thành phần tương hỗ update
SveltesttrapSveltestrap đáp ứng những thành phần Bootstrap 5 cho ứng dụng Svelte 3 mà không yêu cầu bạn sử dụng những lớp thành phần Bootstrap
Bạn cũng nhận được một số trong những thành phần tùy chỉnh không được gửi cùng với React theo mặc định, ví dụ như những thành phần mờ dần và ngoài khung vẽ của nó. Ngoài ra, bạn cũng luôn có thể có quyền truy cập vào những hình tượng Bootstrap ngoài hộp
Khả năng truy cập trong Bootstrap
Lý tưởng nhất là Bootstrap được xây dựng để tuân thủ Nguyên tắc truy cập nội dung web tiêu chuẩn 2. 0 (WCAG 2. 0). Nhưng tất nhiên, hầu hết những yếu tố trợ năng cũng phụ thuộc vào cấu trúc đánh dấu của nhà phát triển, mẫu mã tương hỗ update và tập lệnh được sử dụng
Nhóm Bootstrap đã đủ công minh để lưu ý cách đưa thêm những vai trò và thuộc tính trợ năng cho từng thành phần tương tác vào tài liệu của tớ. Điều đó giúp những nhà phát triển thuận tiện và đơn giản nêu đúng chuẩn hơn hiệu suất cao của thành phần của tớ
Hỗ trợ Bootstrap cho trình đọc màn hình hiển thịBootstrap đáp ứng một lớp tiện ích (_______01) để ẩn nội dung một cách trực quan đồng thời giúp chúng hoàn toàn có thể truy cập được bằng những công nghệ tiên tiến tương hỗ như trình đọc màn hình hiển thị
Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn
Tìm hiểu thêm →
Điều này rất hữu ích trong những tình huống cần chuyển tải thông tin tương hỗ update đến người tiêu dùng không trực quan
Đây là một ví dụ
Danger: This action is not reversible
Mở rộng Bootstrap
Trong một số trong những trường hợp, bạn hoàn toàn có thể muốn thay đổi những kiểu Bootstrap hiện có để phù hợp hơn với nhu yếu của tớ. Ví dụ: bạn hoàn toàn có thể muốn thay đổi màu mặc định cho những thành phần rất khác nhau hoặc sửa đổi đường viền
Có hai cách chính để xử lý và xử lý vấn đề này. sử dụng CSS tùy chỉnh hoặc sử dụng SASS
Ghi đè những kiểu Bootstrap bằng tệp CSS tùy chỉnhSử dụng tệp CSS tùy chỉnh chắc như đinh là cách xử lý và xử lý dễ nhất lúc mở rộng Bootstrap. Phương pháp này yêu cầu bạn tạo một tệp
2 bên phía ngoài và tham chiếu nó sau tệp CSS Bootstrap chínhĐây là một ví dụ
Tùy chỉnh kiểu Bootstrap bằng SASSSASS (bản định kiểu cú pháp tuyệt vời) về cơ bản là ngôn từ ngữ cảnh tiền xử lý biên dịch thành CSS. SASS giúp tạo và sử dụng lại những biến CSS thuận tiện và đơn giản hơn. Hơn nữa, sự tương hỗ của nó cho những tính năng khác ví như kiểu lồng nhau, mixin và mô-đun khiến nó trở nên phổ biến đối với những nhà phát triển
Đối với những người dân lạ lẫm thuộc với SASS, quy trình này còn có vẻ như khá phức tạp
Bootstrap được viết bằng SASS, sau đó được biên dịch thêm thành CSS thuần túy, vì vậy điều này giúp những nhà phát triển quen thuộc với SASS thuận tiện và đơn giản sửa đổi và tinh chỉnh toàn bộ thư viện theo sở thích của tớ
Tuy nhiên, bạn nên tránh sửa đổi những tệp cốt lõi của Bootstrap bất kể lúc nào hoàn toàn có thể và thay vào đó hãy tạo một tài liệu SASS tùy chỉnh nhập Bootstrap để bạn hoàn toàn có thể sửa đổi và mở rộng nó
Các nội dung bài viết hay khác từ LogRocket
- Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocketTìm hiểu cách Galileo của LogRocket vô hiệu tiếng ồn để dữ thế chủ động xử lý và xử lý những vấn đề trong ứng dụng của bạnSử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạnChuyển đổi giữa nhiều phiên bản của NodeKhám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZKhám phá Tauri, một khuôn khổ mới để xây dựng những tệp nhị phânSo sánh NestJS với. Thể hiện. js
Giao diện người tiêu dùng vật liệu (MUI) cho React
MUI là một khối mạng lưới hệ thống Thiết kế Vật liệu để triển khai những ứng dụng nhờ vào React, đáp ứng một số trong những lượng lớn những thành phần dựng sẵn có sẵn ngay lập tức để sử dụng trong sản xuất
Hệ thống Material Design do Google tạo ra để giúp những nhà phát triển xây dựng trải nghiệm kỹ thuật số rất chất lượng cho Android, iOS, Flutter và web. Các ứng dụng trong trường hợp này được xây dựng để tuân theo những nguyên tắc, hành vi và hướng dẫn thiết kế như được ghi trên trang web chính thức
Các nguyên tắc thiết kế cũng gồm có những hướng dẫn về cách tạo những thành phần, sắc tố và những tùy chọn theo chủ đề để tuân theo, những khái niệm về cách tương tác và luồng hoạt ảnh nên ra làm sao, kiểu chữ và những hình tượng được đề xuất, cùng rất nhiều nguyên tắc khác
Sử dụng thiết kế vật liệu
Các nhà phát triển chính thức của Material Design đáp ứng một bộ khung và gói cho tất cả ứng dụng di động và web. Trên thực tế, nó là khối mạng lưới hệ thống thiết kế mặc định trong những framework như Flutter và Kotlin
Tuy nhiên, hiệp hội lập trình viên đã và đang xây dựng một số trong những công cụ mã nguồn mở để tương hỗ lập trình viên tích hợp Material Design vào nhiều web framework, trong đó có MUI
MUI được thiết kế để trở nên mê hoặc, với nhiều tùy chọn tùy chỉnh được cho phép bạn thuận tiện và đơn giản xây dựng khối mạng lưới hệ thống thiết kế tùy chỉnh của riêng mình trên những thành phần của nó
Hơn nữa, thư viện chứa nhiều thành phần không còn trong những thành phần chính thức của Thiết kế Vật liệu, nhưng vẫn tuân thủ tiêu chuẩn thiết kế của nó
Vuetify. Khám phá một công cụ nguồn mở khác cho Thiết kế Vật liệuVuetify là một Vue. khung nhờ vào js cũng gồm có nhiều yếu tố Thiết kế Vật liệu. Trong khi có nhiều Vue. js, Vuetify đã trở nên phổ biến đối với những nhà phát triển Vue vì nó dễ học hơn so với những khung khác
Ngoài ra, Vuetify được thiết kế với mục tiêu là mô-đun, đáp ứng và hoạt động và sinh hoạt giải trí theo mặc định và đi kèm với một số trong những chủ đề để lựa chọn
Khả năng truy cập trong Thiết kế Vật liệu và những thư viện như MUI
Hệ thống Material Design của Google đã gồm có những nguyên tắc trợ năng và những phương pháp hay nhất, đồng thời những thư viện và khung được tạo xung quanh khối mạng lưới hệ thống đó nhất định phải tuân theo chúng theo mặc định. Ngoài ra, hầu hết những thư viện này, như Vuetify và MUI, đều có một số trong những tính năng tương hỗ update để tiếp tục tạo những ứng dụng phong phú và dễ tiếp cận
Mở rộng Material Design với MUI
Thư viện MUI có một số trong những phương pháp để tùy chỉnh và mở rộng những thành phần của nó. Một tùy chọn là gồm có chỗ tựa
3 của thư viện và đặt giá trị của nó thành CSS ghi đè ưa thích của bạn. Dưới đây là một ví dụ về thành phần thanh trượt của nóNó cũng gồm có một thành phần
4 và 5, được cho phép bạn thay đổi mẫu mã và xác định một chủ đề riêng biệt cho mọi thành phần mong ước. Để tìm hiểu thêm về kĩ năng tùy chỉnh và mở rộng MUI, nhóm đã tạo mộtMở rộng thiết kế vật liệu với Vuetify
Việc tùy chỉnh những thành phần Vuetify khá đơn giản. Bạn hoàn toàn có thể thuận tiện và đơn giản sửa đổi những chủ đề thành phần trong quá trình khởi tạo thư viện bằng phương pháp đáp ứng trường chủ đề cho hàm tạo Vuetify
Dưới đây là ví dụ về cách chúng tôi ghi đè màu thành phần cho tất cả chủ đề sáng và tối
________số 8Nhóm Vuetify đã và đang phát triển một trình tạo chủ đề chuyên được dùng được cho phép bạn chỉ việc tạo và xuất những chủ đề cho ứng dụng của tớ từ nhiều tùy chọn màu rất khác nhau
CSS đuôi gió
Tailwind CSS là một khung giao diện người tiêu dùng tương đối mới, được phát hành lần đầu vào ngày một tháng 11 năm 2022, với phiên bản đầu tiên được tạo bởi Adam Wathan và Steve Schoger. Kể từ đó, thư viện đã thu hút được rất nhiều sự để ý quan tâm và thậm chí còn được những tập đoàn áp dụng, gồm có Algolia và Mozilla
Tailwind CSS khác với những thư viện CSS đã đề cập trước đó ở chỗ nó không trực tiếp đáp ứng những thành phần giao diện người tiêu dùng. Thay vào đó, nó đáp ứng những lớp tiện ích thấp cấp được cho phép bạn tạo những thiết kế hoàn toàn độc đáo
Thư viện này hoạt động và sinh hoạt giải trí bằng phương pháp quét những tên lớp trong tất cả những tệp HTML, những thành phần JavaScript và bộ sưu tập khác của bạn, sau đó tạo những kiểu có liên quan và ghi chúng vào một tệp CSS tĩnh
Để hiểu điều này nghĩa là gì, phía dưới là một ví dụ về cách tạo nút chính (màu xanh) trong Bootstrap so với. MÙI vs. CSS đuôi gió
Ví dụ Bootstrap thuần túy
MÙI ví dụ
Danger: This action is not reversible
0Ví dụ CSS Tailwind
Danger: This action is not reversible
1Như bạn hoàn toàn có thể thấy, không in như những thư viện khác, Tailwind được cho phép bạn tùy chỉnh trực tiếp những phần tử của tớ bằng phương pháp sử dụng những lớp tiện ích. Bạn hoàn toàn có thể chỉ định biến thể màu, màu nền khi di chuột theo cách thủ công, v.v.
Khi bạn có những thành phần chung tuân theo cùng một mẫu thiết kế, ví dụ trên hoàn toàn có thể khá mệt mỏi và tốn thời gian. Đây là nguyên do tại sao tồn tại một tùy chọn tương hỗ update để trích xuất những lớp thành phần. Đây là một ví dụ
Danger: This action is not reversible
2Tuy nhiên, nên tránh làm điều này bất kể lúc nào hoàn toàn có thể vì nó không phù phù phù hợp với mục tiêu của thư viện, đó là tránh phải viết mã CSS và đặt lại tên lớp cho bộ sưu tập mã đó
Sử dụng CSS Tailwind
Tailwind CSS có sẵn dưới dạng gói nút hoàn toàn có thể được mở rộng dưới dạng plugin PostCSS. Nó cũng khá được phục vụ qua CDN, tuy nhiên CDN chỉ dành riêng cho mục tiêu phát triển và không phải là lựa chọn lý tưởng cho sản xuất
Gói nút hoàn toàn có thể được tùy chỉnh để hoạt động và sinh hoạt giải trí với tất cả những khung giao diện người tiêu dùng JavaScript (React, Vue, Vite, v.v.), Laravel và thậm chí cả ứng dụng Ruby on Rails
Khả năng truy cập trong Tailwind CSS
Tailwind CSS được xây dựng để hoạt động và sinh hoạt giải trí hiệu suất cao và hoàn toàn có thể truy cập theo mặc định. Giống như Bootstrap, Tailwind gồm có những lớp tiện ích tương hỗ update để cải tổ kĩ năng truy cập — đáng để ý quan tâm nhất là lớp trình đọc màn hình hiển thị (
6 và 7). Ví dụDanger: This action is not reversible
5Ngoài ra, với những lớp tiện ích có điều kiện của Tailwind, bạn hoàn toàn có thể tiến thêm một bước để ẩn hoặc hiện những mục cho trình đọc màn hình hiển thị nhờ vào trạng thái phần tử (tiêu điểm, di chuột, v.v. ) và độ phân giải thiết bị
Danger: This action is not reversible
6Sử dụng Bootstrap với Tailwind hoặc MUI
Mặc dù không được khuyến nghị, nhưng hoàn toàn có thể sử dụng một thư viện cùng với một thư viện khác
Hãy lưu ý rằng những thư viện và khung rất khác nhau mang tên lớp giống hệt nhau đằng sau hậu trường, ví dụ như cách những lớp
8, 9 vàĐây là một ví dụ về việc sử dụng Bootstrap kết phù phù hợp với Tailwind CSS
0Trong ví dụ trên, nếu tất cả chúng ta sử dụng một lớp tiện ích tồn tại trong cả hai thư viện, mẫu mã của Tailwind sẽ được áp dụng đa phần. Điều này là vì chúng tôi đã nhập nó sau Bootstrap trong phần đầu của HTML, do đó ghi đè những kiểu xung đột
Phần kết luận
Bài viết này đáp ứng hướng dẫn nâng cao về những thư viện và khung CSS phổ biến. Tôi kỳ vọng điều này sẽ giúp bạn chọn công cụ phù hợp để sử dụng khi phát triển những ứng dụng giao diện người tiêu dùng của tớ
Nếu bạn có nguyên do khác để ưu tiên khung này hơn khung khác, vui lòng chia sẻ nó trong những nhận xét phía dưới. Hãy nói về chuyện đó
Cảm ơn vì đã đọc
Giao diện người tiêu dùng của bạn có ngốn CPU của người tiêu dùng không?
Khi giao diện người tiêu dùng web ngày càng phức tạp, những tính năng ngốn tài nguyên ngày càng đòi hỏi nhiều hơn nữa từ trình duyệt. Nếu bạn quan tâm đến việc giám sát và theo dõi mức sử dụng CPU phía máy khách, mức sử dụng bộ nhớ, v.v. cho tất khắp cơ thể dùng của bạn trong sản xuất, hãy thử LogRocket.
https. // tên lửa. com/đăng ký/LogRocket in như một DVR dành riêng cho ứng dụng web và thiết bị di động, ghi lại mọi thứ xảy ra trong ứng dụng web hoặc trang web của bạn. Thay vì đoán nguyên do tại sao sự cố xảy ra, bạn hoàn toàn có thể tổng hợp và báo cáo về những chỉ số hiệu suất chính của giao diện người tiêu dùng, phát lại những phiên của người tiêu dùng cùng với trạng thái ứng dụng, ghi lại những yêu cầu mạng và tự động hiển thị tất cả những lỗi
Tôi có nên sử dụng Tailwind CSS với material UI không?
Việc sử dụng CSS Tailwind và Material UI hoàn toàn có thể giúp quá trình phát triển trang web trở nên thuận tiện và đơn giản hơn , trong nội dung bài viết này, tất cả chúng ta sẽ tìm hiểu cách sử dụng Tailwind CSS để tùy chỉnh kiểu của thành phần Material UI. Có thể có một số trong những xung đột trong Tiếp theo. js, tất cả chúng ta hoàn toàn có thể xóa quy tắc đặt lại của Tailwind CSS mà không cần sử dụng thông tư cơ sở @tailwind.Có đáng để sử dụng Tailwind CSS không?
Có nhiều quyền lợi khi sử dụng Tailwind CSS thay vì sử dụng bộ giao diện người tiêu dùng truyền thống. Chúng ta hãy đi qua một số trong những quyền lợi quan trọng. Đầu tiên, Tailwind CSS đáp ứng cho bạn kích thước tệp CSS nhỏ hơn . Tạo kiểu cho ứng dụng web của bạn bằng CSS thuần túy yêu cầu bạn viết nhiều CSS hơn khi bạn thêm nhiều tính năng và thành phần hơn vào ứng dụng web của tớ.CSS Tailwind có tốt cho những dự án công trình bất Động sản lớn không?
Một số nhược điểm khi sử dụng Tailwind CSS gồm có. Phần đánh dấu của bạn hoàn toàn có thể trông lộn xộn đối với những dự án công trình bất Động sản lớn vì tất cả những kiểu đều nằm trong tệp HTML . Không dễ học nếu bạn không làm rõ về CSS.Tôi hoàn toàn có thể sử dụng MUI và Tailwind cùng nhau không?
Có, bạn hoàn toàn có thể chạy cả hai khung giao diện người tiêu dùng . Tải thêm tài liệu liên quan đến nội dung bài viết UI hay Tailwind CSS vật liệu nào tốt hơn? programming css