Hướng dẫn bootstrap or tailwind 2022 - bootstrap hoặc tailwind 2022
|
Biên tập viên Lưu ý: Bài đăng này đã được cập nhật vào ngày 22 tháng 9 năm 2022 để bao gồm thông tin về lợi ích của CSS Tailwind, tại sao bạn nên sử dụng nó, nếu CSS Tailwind dễ dàng và phổ biến hơn Bootstrap và để cập nhật chung trên Tailwind CSS v3.0.: This post was updated 22 September 2022 to include information about the benefits of Tailwind CSS, why you should use it, if Tailwind CSS is easier and more popular than Bootstrap, and for general updates on Tailwind CSS v3.0.: This post was updated 22 September 2022 to include information about the benefits of Tailwind CSS, why you should use it, if Tailwind CSS is easier and more popular than Bootstrap, and for general updates on Tailwind CSS v3.0. Show
Nội dung chính ShowShow
Chúng tôi trải nghiệm sự phục hưng của các nền tảng web tuyệt vời và thiết kế đáp ứng. Giao diện người dùng đáp ứng thường được triển khai bằng các bộ dụng cụ UI như Bootstrap, Foundation, Bulma và các truy vấn truyền thông kiểu cũ tốt. Các bộ UI này cho phép chúng tôi dễ dàng thực hiện các chỉ thị để đạt được UI chính xác và khả năng đáp ứng đúng đắn mà chúng tôi yêu cầu với ít mã hơn. Nhưng chúng ta đã làm điều đó đúng không? Điều gì sẽ xảy ra nếu chúng ta có thể đạt được giao diện người dùng đáp ứng mà không bị ràng buộc bởi các quy tắc của bộ UI? Có cách nào để đạt được khả năng đáp ứng và vẫn giữ các thiết kế giao diện người dùng tùy chỉnh của chúng tôi không? Đối với các nhà phát triển đánh giá cao mức độ cao của Tailwind CSS có khả năng tùy chỉnh cao cung cấp sự linh hoạt hơn so với bộ UI như Bootstrap. Trong hướng dẫn này, chúng tôi sẽ khám phá sự khác biệt giữa CSS và bootstrap đuôi, xem xét một số ví dụ để chứng minh những lợi thế của việc sử dụng khung CSS đầu tiên tiện ích so với bộ UI truyền thống và nêu bật một số thay đổi lớn gần đây nhất đối với ngày càng Khung CSS Tailwind phát triển.
CSS đuôi là gì?Tại sao sử dụng CSS đuôi? Lợi ích của việc sử dụng CSS đuôi Tại sao sử dụng CSS đuôi?Lợi ích của việc sử dụng CSS đuôi Điều gì khác biệt giữa sự khác biệt giữa CSS Tailwind và Bootstrap? Lợi ích của việc sử dụng CSS đuôiĐiều gì khác biệt giữa sự khác biệt giữa CSS Tailwind và Bootstrap? Tailwind CSS hay bootstrap có phổ biến hơn không? Tailwind CSS có tốt hơn so với bootstrap không? CSS đuôi có dễ dàng hơn so với bootstrap không? Cách cài đặt CSS đuôi Cuối cùng, bạn cũng có thể loại bỏ CSS không sử dụng để tối ưu hóa. PURGECSS có thể được sử dụng để tối ưu hóa CSS đuôi, đây là một lợi thế đáng kể. PURGECSS có thể giảm đáng kể kích thước tệp bằng cách quét HTML và xóa các lớp không cần thiết. Điều gì khác biệt giữa sự khác biệt giữa CSS Tailwind và Bootstrap?Bootstrap là khung HTML, CSS và JavaScript phổ biến nhất để xây dựng các dự án phản ứng, đầu tiên trên web. Tailwind CSS, mặt khác, là khung CSS đầu tiên tiện ích phổ biến nhất để phát triển UI nhanh. Sự khác biệt chính giữa Tailwindcss và Bootstrap là CSS Tailwind không phải là bộ UI. Không giống như các bộ dụng cụ UI như Bootstrap, Bulma và Foundation, Tailwind CSS không có chủ đề mặc định hoặc các thành phần UI sẵn có. Thay vào đó, nó đi kèm với các tiện ích được thiết kế trước bạn có thể sử dụng để xây dựng trang web của mình từ đầu. Bootstrap được biết đến với khả năng đáp ứng của nó, trong khi những người đề xuất CSS Tailwind thường coi trọng khả năng tùy chỉnh của khung. Sự lựa chọn tốt nhất cho bạn phụ thuộc vào các ưu tiên và yêu cầu dự án của bạn, nhưng hãy để nói về lý do tại sao CSS Tailwind nhanh chóng trở nên phổ biến và sử dụng rộng rãi hơn. Tailwind CSS hay bootstrap có phổ biến hơn không?Tailwind CSS có được sử dụng rộng rãi hơn so với bootstrap không? Làm thế nào chúng ta có thể chắc chắn về điều này? Để bắt đầu, hãy để sử dụng dữ liệu GitHub để thiết lập khung nào trong hai khung CSS phổ biến hơn. Trên GitHub, Tailwind CSS có dĩa 3,1k và 61,1k sao, trong khi Bootstrap có 77,3k Fork và 160K sao. Chúng ta có thể đưa ra giả định chung từ điều này rằng bootstrap phổ biến hơn CSS đuôi. Ở đây, một thực tế khác: Bootstrap dường như phổ biến hơn CSS Tailwind, theo dữ liệu gần đây nhất từ trạng thái của CSS trên tab Nhận thức. Tailwind CSS có tốt hơn so với bootstrap không?Các khung như Bootstrap đã trừu tượng hóa việc tạo ra các thành phần đến mức mà nó buộc các nhà phát triển chỉ sử dụng các mẫu có sẵn được cung cấp. Điều tương tự cũng xảy ra với các khung loại bộ UI khác. Một số người có thể lập luận rằng việc ghi đè khung với CSS của chúng ta là một tùy chọn, nhưng nếu chúng ta ghi đè rất nhiều, thì có thực sự có bất kỳ điểm nào trong việc sử dụng khung không? Chúng tôi đã rút vào thư viện và vẫn viết mã của riêng mình - đây chỉ là nhiều tệp để lo lắng và chúng tôi thậm chí không tiết kiệm thời gian. Nhiều bài viết tuyệt vời hơn từ Logrocket:
Một vấn đề khác tôi đã tìm thấy với các trang web bootstrap là chúng hầu như luôn trông giống nhau, vì vậy điều này ức chế khả năng của chúng tôi để kết hợp sự sáng tạo vào môi trường phát triển. Đây là một trong những lợi thế của CSS Tailwind: khả năng dễ dàng xây dựng các giao diện người dùng phức tạp mà không khuyến khích bất kỳ hai trang web nào trông giống nhau. Một lợi thế quan trọng khác của việc sử dụng CSS Tailwind trên Bootstrap là, vì các ứng dụng và trang web bao gồm các vật dụng được thiết kế trước, CSS Tailwind không áp đặt các quyết định thiết kế khó khăn. Làm việc với Tailwind CSS có nghĩa là sử dụng một tập hợp các lớp tiện ích cho phép bạn làm việc với chính xác những gì bạn cần. Theo tôi, đây là một cách gọn gàng để tạo giao diện người dùng linh hoạt hơn đối với sự sáng tạo của nhà phát triển. Một lợi thế khác mà tôi thực sự đánh giá cao - và tôi chắc chắn rằng mọi nhà phát triển Frontend cũng sẽ đánh giá cao - không bao giờ phải lo lắng về những thay đổi đối với một yếu tố ảnh hưởng đến một yếu tố liên quan khác. Không còn lập bảng qua lại giữa HTML và các bảng phong cách trong trình soạn thảo của bạn, không còn quay lại để kiểm tra và xem những gì bạn đặt tên cho yếu tố khác đó. Theo tôi, đây là tương lai. CSS đuôi có dễ dàng hơn so với bootstrap không?Bootstrap là một khung dựa trên thành phần, có nghĩa là nó đi kèm với các thành phần được xây dựng sẵn và bao gồm các tiện ích khác để hiển thị phân lớp, khoảng cách, v.v. Tailwind, mặt khác, CSS là một khung công tác đầu tiên tiện ích. Sử dụng CSS Tailwind giống như viết CSS thông thường. Không giống như Bootstrap, nó không có thành phần được xây dựng sẵn. Với các thành phần được xây dựng sẵn Bootstrap, có rất ít CSS để bạn viết. Do đó, những thay đổi tinh tế trong thiết kế có thể dẫn đến trục trặc. Với CSS Tailwind, bạn tạo kiểu cho các yếu tố của mình từ đầu bằng cú pháp kiểu dáng Tailwind. Nó dễ dàng hơn để thực hiện các thay đổi với CSS Tailwind vì bạn chỉ phải xóa một số lớp CSS. Vậy cái nào dễ dàng hơn, CSS đuôi hoặc bootstrap? Nó phụ thuộc phần lớn vào trường hợp sử dụng và đường cong học tập. Nếu bạn đã thành thạo các CSS, bạn đã tiếp tục làm chủ CSS Tailwind. Vì lý do này, Tailwind CSS là một lựa chọn tuyệt vời cho hầu hết các dự án. Cách cài đặt CSS đuôiMặc dù CDN là một cách tốt để nhập phong cách trong dự án của bạn, nhưng nhiều tính năng của CSS Tailwind không có sẵn bằng cách sử dụng các bản dựng CDN. Để tận dụng tối đa các tính năng của Tailwind, trước tiên bạn phải cài đặt Tailwind qua NPM. Tailwind có sẵn trên NPM và có thể được cài đặt bằng NPM hoặc Sợi: # Using npm npm install tailwindcss --save-dev # Using Yarn yarn add tailwindcss --dev Tiếp theo, tạo một tệp cấu hình đuôi. Tailwind được cấu hình gần như hoàn toàn trong JavaScript đơn giản. Để làm điều này, bạn sẽ cần phải tạo tệp cấu hình đuôi cho dự án của mình. Bạn nên tạo một tệp 1 trong root dự án của bạn. Tiện ích CLI giúp bạn xử lý điều này một cách dễ dàng: # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename] Nếu bạn là một người dùng đuôi có kinh nghiệm, người không cần các nhận xét trong tệp cấu hình, bạn có thể sử dụng cờ 2 khi tạo tệp cấu hình của bạn để loại bỏ chúng. Tiện ích đầu tiên có nghĩa là gì?Tailwind CSS là một thư viện đầu tiên tiện ích, điều đó có nghĩa là, không giống như Bootstrap, Tailwind không cung cấp các thành phần tự động. Thay vào đó, nó cung cấp các lớp tiện ích giúp chúng tôi tạo kiểu cho các thành phần của chúng tôi theo những cách nhất định và cho phép chúng tôi xây dựng các lớp học của riêng mình. Hãy cùng xem xét hai ví dụ đơn giản để khám phá khái niệm này. Ví dụ 1: Bản demo nút đơn giảnXem ví dụ hộp bút. bởi Ekwuno Obinna (@ekwunoobinna) trên Codepen. Box example . by Ekwuno Obinna (@ekwunoobinna) on CodePen. Từ ví dụ trên, bạn có thể thấy việc triển khai thành phần nút với Tailwind CSS dễ dàng như thế nào. Ví dụ 2: Bản demo thẻ đơn giảnMã dưới đây là một ví dụ đơn giản về một thẻ được tạo với khung CSS Tailwind. Nếu bạn quen thuộc với CSS, bạn đã có thể tìm ra một số điều đang diễn ra với kiểu dáng. Lúc đầu, có thể là một chút khó khăn để ghi nhớ tất cả những điều này, nhưng một khi bạn có một chút quen thuộc với cú pháp, bạn sẽ ổn. Đoạn mã bên dưới có một thùng chứa có bóng cho màn hình lớn do lớp 3 và nền trắng được triển khai với 4. Bạn cũng sẽ nhận thấy các lớp 5 và 6- đây chỉ là để giúp đệm trong trục X và Y cho nút tin nhắn.
Dưới đây là một codepen cho thấy mã trên trông như thế nào: Xem thẻ CSS đuôi bút của Chidume David (@Philipsz-Davido) trên Codepen. Tailwind Css Card by Chidume David (@philipsz-davido) on CodePen. Tailwind CSS so với Bootstrap: Hiệu suấtCấu hình đuôi mặc định đi kèm với Minified 36,4kB và G-Zipped. So với bootstrap ở mức 22,1kb, Tailwind nặng hơn 14,3kb. Bạn có thể nghĩ, đây có thực sự là cách để thực hiện hiệu suất không? Lý do cho điều này rất đơn giản: Tailwind được đặt trước với rất nhiều tùy chọn và kiểu dáng cho người dùng lựa chọn và nó đóng gói tất cả các biến thể này để giảm xu hướng viết CSS của riêng bạn. May mắn thay, Tailwind đi kèm với một vài chiến lược bạn có thể sử dụng để giữ cho CSS được tạo ra nhỏ và hiệu suất. Hạn chế bảng màu của bạnBởi vì các mô -đun tiện ích sẵn có trong Tailwind sử dụng hệ thống plugin dưới mui xe, nên có thể xóa một tấn mã và làm cho hệ thống plugin theo cách mà các lớp mới được đăng ký bên trong CSS Tailwind. Điều này cho phép chỉ bao gồm mã chúng ta thực sự cần trong các dự án trong khi bỏ qua mọi thứ khác - không giống như Bootstrap, trong đó có rất nhiều mã trên cao. Tính năng nâng cấp này rút ngắn thời gian xây dựng từ 158s xuống 8s. Chúng ta có thể nhận được số lượng chính xác các biến thể màu mà chúng ta cần trong một dự án, như vậy: # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]4
Xóa CSS chưa sử dụng bằng PUMGECSSTailwind cũng loại bỏ CSS không sử dụng bằng PUMGECSS, một công cụ để loại bỏ CSS chưa sử dụng khỏi dự án của bạn. Nó thực hiện điều này bằng cách chỉ đơn giản là so sánh các tên lớp CSS có sẵn trong mẫu của bạn với các tên lớp được sử dụng và sau đó xóa CSS không sử dụng. Chọn số lượng màn hình chính xác bạn cầnTailwind CSS cho phép bạn chọn chính xác số lượng kích thước màn hình bạn cần. Tại đây, cách xác định ít màn hình hơn ảnh hưởng đến đầu ra:
Cải thiện Tailwind CliTailwind CSS 2.2 đã giới thiệu các tối ưu hóa chính cho Công cụ CLI Tailwind. CLI Tailwind được tân trang lại từ đầu để làm cho nó hoạt động hơn. Với CLI được nâng cấp, CSS đuôi không yêu cầu cài đặt hoặc cấu hình. Bạn có thể chuyển các tiểu ban cho Tailwind CLI để xử lý các tệp CSS theo thông số kỹ thuật của bạn. Lệnh 7 có thể được thông qua Subargs, vì vậy điều này không có bất kỳ cấu hình đuôi nào; Mọi thứ có thể được thực hiện thông qua dòng lệnh. Tailwind CLI có thể chạy ở chế độ đồng hồ. Điều này có nghĩa là Tailwind CLI chạy trong nền để theo dõi các thay đổi trong CSS của chúng tôi và xây dựng lại CSS bất cứ khi nào phát hiện ra sự thay đổi. Điều này có hiệu suất cao bởi vì nó loại bỏ sự cần thiết phải xây dựng lại CSS của bạn theo cách thủ công sau mỗi lần thay đổi. Ngoài ra, Tailwind CLI hiện bao gồm hỗ trợ plugin PostcSS. Bằng cách tạo tệp 8 và bao gồm các plugin bổ sung PostcSS, bạn có thể sử dụng cờ 9 trong lệnh # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]40 của mình để bao gồm các plugin PostcSS khi xây dựng CSS của bạn. Cuối cùng, Tailwind CLI được tân trang có thể được thiết lập để xây dựng CSS của bạn để sản xuất. Xây dựng để sản xuất sẽ khiến Tailwind CLI loại bỏ CSS không sử dụng. Điều này dẫn đến một bản dựng nhỏ được tối ưu hóa và nhỏ hơn, dẫn đến hiệu suất tối ưu vì dấu chân kích thước tệp thấp. Để thiết lập sản xuất, chúng tôi sử dụng cờ # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]41 và # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]42 để nén CSS để xây dựng tối ưu. Tailwind CSS linh hoạt như thế nào?Tailwind rất linh hoạt vì nó cho phép bạn thêm các tiện ích của riêng mình và cung cấp một hướng dẫn để giúp bạn thực hiện điều này. Hãy để Lừa thực hiện một phong cách đơn giản làm ví dụ. Thiết lập đuôi bình thường là một tệp CSS duy nhất trông như thế này: # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]1 Để ghi đè các tiện ích mặc định, chúng tôi sẽ phải nhập quá trình ghi đè cuối cùng để nó được áp dụng trước (đó là quy tắc CSS phổ biến): # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]2 Nhưng nếu bạn sử dụng # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]43 hoặc bộ tiền xử lý như Less, Sass hoặc Stylus, việc giữ các tiện ích của bạn trong một tệp riêng biệt và nhập chúng sẽ là bước đi tốt nhất: # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]4 Điều tương tự có thể được thực hiện cho bố cục đáp ứng. Các tiện ích tùy chỉnh sẽ luôn được ưu tiên hơn các tiện ích có tiền tố miễn là nó được thực hiện đúng. Hãy nói rằng bạn đã sử dụng lại một kiểu nút nhất định ở nhiều nơi. Việc retyping cùng một loại thông số kỹ thuật cho cùng một thành phần trở nên hơi nhàm chán. Đừng lo lắng: Tailwind có cách sử dụng lại kiểu dáng với # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]5. Đây là một ví dụ: # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]6
Tailwind CSS vào năm 2022: Cái gì mới và chúng ta đang đi đâu?Vào ngày 17 tháng 6 năm 2021, Tailwind đã phát hành một trong những bản phát hành Tailwind giàu tính năng nhất mọi thời đại, Tail Tailwind CSS v2.2. Bản phát hành này xuất hiện sau khi Tailwind CSS v2.1, giới thiệu chế độ chỉ trong thời gian, một trình biên dịch JIT mới tạo ra các kiểu theo yêu cầu khi bạn viết mẫu của mình thay vì tạo mọi thứ trước vào thời điểm xây dựng ban đầu. Ngoài Tailwind CLI mới, bản phát hành chính gần đây nhất bao gồm giới thiệu hỗ trợ lớp giả, cú pháp Opacity màu sắc, một loạt các biến thể mới và nhiều hơn nữa. Kiểm tra lịch sử phát hành Tailwind, để theo kịp những thay đổi gần đây nhất. Hãy để nhấn mạnh một vài tính năng được giới thiệu trong Tailwind v2.2. # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename] 6 và # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename] 7 biến thểTính năng này là một biến thể giả. Nó cho phép chúng tôi thêm # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]10 và # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]11 CSS Pseudo-chọn cho các yếu tố của chúng tôi. Bộ chọn # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]10 CSS chọn và tạo kiểu chữ cái đầu tiên của nút văn bản phần tử mà nó được áp dụng. # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]6 Mã trên sẽ làm cho chữ cái đầu tiên của nút # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]13 nút văn bản táo bạo hơn so với các chữ cái khác trong nút văn bản của nó. # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]8 Mã trên làm cho chữ cái đầu tiên của yếu tố # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]13 nút văn bản táo bạo hơn và lớn hơn các chữ cái khác trong nút văn bản. Các bộ chọn giả # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]11 Kiểu Dòng đầu tiên của một phần tử cấp khối. # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]0 Điều này biến dòng đầu tiên của nút văn bản phần tử # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]13 sang màu đỏ màu. Tính năng này được sử dụng trong chế độ JIT CSS Tailwind. # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename] 8 và # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename] 9 biến thểTính năng mới này cho phép tạo kiểu cho các yếu tố giả # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]8 và # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]9. Những người lựa chọn giả này chèn một số văn bản trước và sau một phần tử. Bây giờ chúng ta có thể sử dụng các lựa chọn giả # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]8 và # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]9 trong Tailwind. Đây là một ví dụ: # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]1 N.B., # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]45, # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]46 và # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]47 Các biến thể tiện ích có thể được trộn trực tiếp. # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]2 Tailwind CSS vào năm 2022: Cái gì mới và chúng ta đang đi đâu? Vào ngày 17 tháng 6 năm 2021, Tailwind đã phát hành một trong những bản phát hành Tailwind giàu tính năng nhất mọi thời đại, Tail Tailwind CSS v2.2. Bản phát hành này xuất hiện sau khi Tailwind CSS v2.1, giới thiệu chế độ chỉ trong thời gian, một trình biên dịch JIT mới tạo ra các kiểu theo yêu cầu khi bạn viết mẫu của mình thay vì tạo mọi thứ trước vào thời điểm xây dựng ban đầu. Ngoài Tailwind CLI mới, bản phát hành chính gần đây nhất bao gồm giới thiệu hỗ trợ lớp giả, cú pháp Opacity màu sắc, một loạt các biến thể mới và nhiều hơn nữa. Kiểm tra lịch sử phát hành Tailwind, để theo kịp những thay đổi gần đây nhất.Hãy để nhấn mạnh một vài tính năng được giới thiệu trong Tailwind v2.2. # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]3 # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]6 và # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]7 biến thể Tính năng này là một biến thể giả. Nó cho phép chúng tôi thêm # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]10 và # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]11 CSS Pseudo-chọn cho các yếu tố của chúng tôi. Bộ chọn @tailwind preflight; @tailwind components; @tailwind utilities; 0 CSS chọn và tạo kiểu chữ cái đầu tiên của nút văn bản phần tử mà nó được áp dụng.Biến thể # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]41 biên dịch xuống bộ chọn giả # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]42. Nó cho phép bạn tạo kiểu cho điểm đánh dấu của một mục danh sách. Bộ chọn này hoạt động trên các yếu tố # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]43. # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]4 Mã trên làm cho màu của các mục # Using npm npx tailwind init [filename] # Using Yarn yarn tailwind init [filename]44 màu xanh đậm. Các tính năng mới của Tailwind CSS về cơ bản được thêm vào tất cả các lớp giả, bao gồm:
Để đi sâu hơn vào các tính năng mới được giới thiệu với Tailwind CSS v2.2, hãy kiểm tra lịch sử phát hành. Các bản cập nhật gần đây nhất trong Tailwind v3.0Tailwind CSS v3.0 là bản phát hành mới nhất từ Tailwind CSS và bản nâng cấp lớn này đi kèm với một số tính năng thực sự thú vị. Hãy để khám phá:
Để biết thêm các tính năng CSS v3.0, hãy kiểm tra blogpost này. Bạn cũng có thể kiểm tra lịch sử phát hành để đi sâu hơn vào các tính năng mới. Sự kết luậnTrong bài viết này, chúng tôi đã thảo luận về tất cả những điều CSS Tailwind so với Bootstrap. Chúng tôi đã nói về sự khác biệt chung của họ, so sánh hai loại so với các tiêu chí khác nhau, đã thảo luận về các bản cập nhật cho Tailwind, v.v. Cảm ơn bạn đã gắn bó xung quanh đến nay! Frontend của bạn có phải là CPU của người dùng của bạn không?Khi các mặt tiền web ngày càng phức tạp, các tính năng tài nguyên-tài nguyên đòi hỏi ngày càng nhiều từ trình duyệt. Nếu bạn quan tâm đến việc theo dõi và theo dõi việc sử dụng CPU phía máy khách, sử dụng bộ nhớ và nhiều hơn nữa cho tất cả người dùng của bạn trong sản xuất, hãy thử logrocket.https: //logrocket.com/signup/  Logrocket giống như một DVR cho các ứng dụng web và 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 tại sao các vấn đề xảy ra, bạn có thể tổng hợp và báo cáo về các số liệu hiệu suất chính, phát lại các phiên của người dùng cùng với trạng thái ứng dụng, yêu cầu mạng nhật ký và tự động bề mặt tất cả các lỗi. Hiện đại hóa cách bạn gỡ lỗi các ứng dụng web và di động - bắt đầu giám sát miễn phí. Tailwind CSS: Tailwind Framework Framework thân thiện với người mới bắt đầu đòi hỏi ít học tập nhất và dễ sử dụng. Bạn cũng có thể tùy chỉnh trang web của mình bằng các lớp trợ giúp CSS Tailwind. Các tính năng chính: Đây là một loại khung đầu tiên tiện ích cung cấp các hướng dẫn.: Beginner-friendly, Easy CSS Framework Tailwind requires the least amount of learning and is easy to use. You can also customize your website using Tailwind CSS helper classes. Key Features: It is a utility-first type of framework that provides tutorials.: Beginner-friendly, Easy CSS Framework Tailwind requires the least amount of learning and is easy to use. You can also customize your website using Tailwind CSS helper classes. Key Features: It is a utility-first type of framework that provides tutorials. Bất kỳ khung CSS nào cũng là một lựa chọn tốt cho năm 2022. Chỉ là Bootstrap đi kèm với các thiết kế hạn chế mà các thiết kế từ bên ngoài phải được tích hợp.Trong Bootstrap, chúng ta có thể thêm lớp được xác định trước vào mã mà không cần ghi mã.Được sử dụng bởi nhiều công ty nổi tiếng các công ty như Twitter, Udemy, Spotify và nhiều hơn nữa.. It's just that Bootstrap comes with limited designs for which designs from outside has to be integrated. In Bootstrap, we can add pre-defined class into the code without writing code. Used by many companies well known companies like Twitter, Udemy, Spotify and more.. It's just that Bootstrap comes with limited designs for which designs from outside has to be integrated. In Bootstrap, we can add pre-defined class into the code without writing code. Used by many companies well known companies like Twitter, Udemy, Spotify and more. Các lớp tiện ích và bố cục của Bootstrap cung cấp cho bạn mọi thứ bạn cần để tạo kiểu cho một trang web đáp ứng.Tuy nhiên, với Tailwind, bạn tham gia nhiều hơn vào việc tạo kiểu cho trang web vì cuối cùng bạn phải tạo các thành phần của riêng mình bằng các lớp tiện ích mà khung cung cấp. Không có khung nhanh hơn Tailwind khi nói đến HTML kiểu dáng.Do đó, bạn có thể dễ dàng tạo bố cục đẹp mắt bằng cách tạo kiểu cho các yếu tố tạo kiểu.Điều này là có thể bởi vì Tailwind cung cấp hàng ngàn lớp học tích hợp không yêu cầu bạn tạo ra các thiết kế từ đầu. |
