Hướng dẫn laravel 8 bootstrap vs tailwind - laravel 8 bootstrap vs tailwind

Biên tập viên Lưu ý: Bài đăng này được cập nhật lần cuối vào ngày 19 tháng 7 năm 2021 để bao gồm thông tin về bản phát hành CSS CSS lớn gần đây nhất, Tailwind CSS v2.2.: This post was last updated on 19 July 2021 to include information about the most recent major Tailwind CSS release, Tailwind CSS v2.2.

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ì?

Theo tài liệu chính thức, Tailwind CSS là khung CSS đầu tiên tiện ích để xây dựng nhanh các giao diện người dùng tùy chỉnh. Tôi thích nghĩ về nó như một cách thú vị để viết kiểu dáng nội tuyến và đạt được một giao diện tuyệt vời mà không cần viết một dòng CSS của riêng bạn.

Theo tôi, một điều mà hầu hết các nhà phát triển sẽ thấy một chút mất tập trung với CSS Tailwind là việc đánh dấu của bạn trông bận rộn hơn nhiều so với bạn có thể muốn. Tailwind CSS không phải là thư viện CSS đầu tiên tiện ích đầu tiên, nhưng nó là phổ biến nhất vào lúc này.

Đ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 tích hợp. 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 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.

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.

Cách cài đặt CSS đuôi

Mặ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 NO___Trans___PRE___15 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 Tailwind 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ờ NO___TRANS___PRE___16 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.

Nhiều bài viết tuyệt vời hơn từ Logrocket:

• Đừng bỏ lỡ một khoảnh khắc với bản phát lại, một bản tin được quản lý từ Logrocket
• Tìm hiểu cách Galileo của Logrocket cắt giảm tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
• Sử dụng React's UsEffect để tối ưu hóa hiệu suất của ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của nút
• Khám phá cách làm động ứng dụng ứng dụng React của bạn với Animxyz
• Khám phá Tauri, một khuôn khổ mới để xây dựng các nhị phân
• So sánh NestJS so với Express.js

Ví dụ 1: Bản demo nút đơn giản

Xem 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ản

Mã 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 các màn hình lớn do lớp no___trans___pre___17 và một nền trắng được triển khai với NO___Trans___Pre___18. Bạn cũng sẽ nhận thấy các lớp NO___TRANS___PRE___19 và NO___TRANS___PRE___20- Đây là để giúp đệm trong các trục x và y cho nút tin nhắn.

 
  
 
     
 
      
 
        
Adam Wathan
 
        
Developer at NothingWorks Inc.
 
      
 
      
 
        Message 
      
 
    
 
  
 

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ất

Cấ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ạn

Bởi vì các mô-đun tiện ích tích hợp 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ừ 158 giây xuống còn 8 giây.

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:

// ...

module.exports = {
  // ...

  textColors: {
    'black': colors['black'],
    'grey-darker': colors['grey-darker'],
    'grey-dark': colors['grey-dark'],
    'red-dark': colors['red-dark'],
    'red': colors['red'],
    'blue-dark': colors['blue-dark'],
    'blue': colors['blue'],
    // ...
  }
}

Chỉ cần thực hiện tối ưu hóa hiệu suất O (N) thành O (1) cho quy trình xây dựng @tailwindcss 💪🏻 Bạn là quái vật sử dụng ứng dụng AT-apply cho mọi thứ sẽ hạnh phúc-Adam Wathan (@adamwathan) ngày 1 tháng 3 năm 2018
You monsters using at-apply for everything will be happy 😇 — Adam Wathan (@adamwathan) March 1, 2018

Xóa CSS chưa sử dụng bằng PUMGECSS

Tailwind 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ần

Tailwind 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:

• Năm kích thước màn hình (mặc định): 36,4kb
• Bốn kích thước màn hình: 29,4kb
• Ba kích thước màn hình: 22,4kb
• Hai kích thước màn hình: 15,4kb
• Kích thước một màn hình: 8.4kb

Cải thiện Tailwind Cli

Tailwind 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

 
  
 
     
 
      
 
        
Adam Wathan
 
        
Developer at NothingWorks Inc.
 
      
 
      
 
        Message 
      
 
    
 
  
 

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 NO___TRANS___PRE___22 và bao gồm các plugin bổ sung của Postcss, bạn có thể sử dụng cờ NO___TRANS___PRE___23 trong lệnh NO___TRANS___PRE___24 của bạn để 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 NO___TRANS___PRE___25 và cờ NO___TRANS___PRE___26 để 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:

@tailwind preflight;

@tailwind components;

@tailwind utilities;

Để 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):

@tailwind preflight;

@tailwind components;

@tailwind utilities;

.bg-cover-image {
  background-image: url('/path/to/image.jpg');
}

Nhưng nếu bạn sử dụng NO___Trans___Pre___27 hoặc một 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:

@tailwind preflight;

@tailwind components;

@tailwind utilities;

@import "leveledup-utilities";

Đ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 số ___trans___pre___28.

Đây là một ví dụ:

  Button 
 

Lưu ý: no___trans___pre___29, no___trans___pre___30 và NO___TRANS___PRE___31 Các biến thể tiện ích có thể được trộn trực tiếp.

Tailwind CSS vào năm 2021: 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 được đưa ra sau khi css css v2.1, giới thiệu chế độ chỉ trong thời gian, một trình biên dịch chỉ trong thời gian 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.

Các biến thể chữ cái và chữ cái đầu tiên

Tính năng này là một biến thể giả. Nó cho phép chúng tôi thêm NO___TRANS___PRE___32 và NO___TRANS___PRE___33 CSS Pseudo-Selector cho các yếu tố của chúng tôi.

Bộ chọn NO___Trans___Pre___32 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 cho.

  This blog post represents everything you can find in today's work.

Mã trên sẽ làm cho chữ cái đầu tiên của NO___TRANS___PRE___35 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ó.

  This blog post represents everything you can find in today's work.

Mã trên làm cho chữ cái đầu tiên của NO___TRANS___PRE___35 Nút văn bản Bỉ mạnh hơn và lớn hơn các chữ cái khác trong nút văn bản.

NO___TRANS___PRE___33 PSEUDO-Selectors Kiểu Dòng đầu tiên của phần tử cấp khối.

# Using npm
npx tailwind init [filename]
# Using Yarn
yarn tailwind init [filename]

Điều này biến dòng đầu tiên của NO___TRANS___PRE___35 Nút văn bản phần tử thành màu đỏ.

Tính năng này được sử dụng trong chế độ JIT CSS Tailwind.

No___trans___pre___39 và no___trans___pre___40 biến thểand @tailwind preflight; @tailwind components; @tailwind utilities; 0 variants

Tính năng mới này có thể tạo kiểu

// ...

module.exports = {
  // ...

  textColors: {
    'black': colors['black'],
    'grey-darker': colors['grey-darker'],
    'grey-dark': colors['grey-dark'],
    'red-dark': colors['red-dark'],
    'red': colors['red'],
    'blue-dark': colors['blue-dark'],
    'blue': colors['blue'],
    // ...
  }
}

@tailwind preflight;

@tailwind components;

@tailwind utilities;

Bây giờ chúng ta có thể sử dụng NO___TRANS___PRE___39 và NO___TRANS___PRE___40 PSEUDO-Selector trong Tailwind.

Đây là một ví dụ:

# Using npm
npx tailwind init [filename]
# Using Yarn
yarn tailwind init [filename]

Lưu ý: no___trans___pre___29, no___trans___pre___30 và NO___TRANS___PRE___31 Các biến thể tiện ích có thể được trộn trực tiếp.

Tailwind CSS vào năm 2021: Cái gì mới và chúng ta đang đi đâu?

# Using npm
npx tailwind init [filename]
# Using Yarn
yarn tailwind init [filename]

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 được đưa ra sau khi css css v2.1, giới thiệu chế độ chỉ trong thời gian, một trình biên dịch chỉ trong thời gian 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.

Các biến thể chữ cái và chữ cái đầu tiên

# Using npm
npx tailwind init [filename]
# Using Yarn
yarn tailwind init [filename]

Tính năng này là một biến thể giả. Nó cho phép chúng tôi thêm NO___TRANS___PRE___32 và NO___TRANS___PRE___33 CSS Pseudo-Selector cho các yếu tố của chúng tôi.

Giống như các tính năng mới khác được mô tả ở trên, biến thể văn bản no___trans___pre___50 có sẵn ở chế độ JIT.

Danh sách các biến thể đánh dấu

Biến thể NO___TRANS___PRE___53 biên dịch xuống NO___TRANS___PRE___54 PSEUDO-SELECTOR. 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ố NO___TRANS___PRE___55.

# Using npm
npx tailwind init [filename]
# Using Yarn
yarn tailwind init [filename]

Mã trên làm cho màu của các mục NO___TRANS___PRE___56 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:

• No___trans___pre___57 (no___trans___pre___58)

• @tailwind preflight;
  
  @tailwind components;
  
  @tailwind utilities;
  
  .bg-cover-image {
    background-image: url('/path/to/image.jpg');
  }
  

  9

• @tailwind preflight;
  
  @tailwind components;
  
  @tailwind utilities;
  
  @import "leveledup-utilities";
  

  0

• @tailwind preflight;
  
  @tailwind components;
  
  @tailwind utilities;
  
  @import "leveledup-utilities";
  

  1

• @tailwind preflight;
  
  @tailwind components;
  
  @tailwind utilities;
  
  @import "leveledup-utilities";
  

  2

• @tailwind preflight;
  
  @tailwind components;
  
  @tailwind utilities;
  
  @import "leveledup-utilities";
  

  3

• @tailwind preflight;
  
  @tailwind components;
  
  @tailwind utilities;
  
  @import "leveledup-utilities";
  

  4

• @tailwind preflight;
  
  @tailwind components;
  
  @tailwind utilities;
  
  @import "leveledup-utilities";
  

  5

• @tailwind preflight;
  
  @tailwind components;
  
  @tailwind utilities;
  
  @import "leveledup-utilities";
  

  6

• @tailwind preflight;
  
  @tailwind components;
  
  @tailwind utilities;
  
  @import "leveledup-utilities";
  

  7

• @tailwind preflight;
  
  @tailwind components;
  
  @tailwind utilities;
  
  @import "leveledup-utilities";
  

  8

• @tailwind preflight;
  
  @tailwind components;
  
  @tailwind utilities;
  
  @import "leveledup-utilities";
  

  9

• 
    Button 
   
  
  
  

  0

• 
    Button 
   
  
  
  

  1

Để đ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.

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.

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í.