Sử dụng Tailwind CSS có tốt không?

Chọn khung CSS phù hợp là chìa khóa để mở rộng khả năng và trải nghiệm của nhóm theo thời gian

Tác giả

Wojciech Kałużny

Chọn khung CSS phù hợp là chìa khóa để mở rộng khả năng và trải nghiệm của nhóm theo thời gian. Khi làm việc với nhiều công nghệ trong nội bộ, điều quan trọng là phải hợp lý hóa càng nhiều quy trình càng tốt để tránh sự kém hiệu quả. Thời gian là tiền bạc

Trong vài năm qua tại Clean Commit, chúng tôi đã xây dựng rất nhiều ứng dụng và trang web. Kể từ năm 2020, chúng tôi đã đầu tư vào việc phát triển khả năng JAM Stack của mình, tập trung vào các dự án thương mại điện tử hoạt động hiệu quả nhất bằng cách sử dụng Shopify, BigC Commerce và các hệ thống hỗ trợ headless khác

Đồng thời, chúng tôi vẫn đang tích cực phát triển các dự án mới dựa trên WordPress và WooC Commerce khi điều đó hợp lý. Chưa kể rằng nhóm của chúng tôi đang tích cực phát triển các ứng dụng tùy chỉnh với các ngăn xếp khác nhau

Nếu bạn phát hiện ra bất kỳ sản phẩm nào của chúng tôi ngoài tự nhiên, bạn sẽ thấy việc sử dụng các công nghệ và khung khác nhau như React, Vue và các ngôn ngữ tạo khuôn mẫu như Laravel Blade ở giao diện người dùng. Các công nghệ này khác nhau đáng kể, vì vậy chúng tôi phải tìm cách tiêu chuẩn hóa việc triển khai chúng càng nhiều càng tốt

Trước khi chúng tôi giải thích suy nghĩ của mình về Tailwind, vui lòng nghe phần giới thiệu ngắn của chúng tôi. Bạn đang cố gắng tìm ra ngăn xếp công nghệ tốt nhất cho trang web hoặc dự án ứng dụng sắp tới của mình? . Điều tồi tệ nhất có thể xảy ra là bạn nhận được lời khuyên dựa trên kinh nghiệm

Vấn đề - thiếu tiêu chuẩn hóa

Chúng tôi làm việc với nhiều công nghệ khác nhau. Việc sử dụng nhiều khung giao diện người dùng và công nghệ phụ trợ làm phức tạp công việc khi các nhà phát triển của chúng tôi chuyển từ dự án này sang dự án khác. Ngoài ra, một số dự án của chúng tôi đã sử dụng các phương pháp tạo kiểu khác nhau. Nhảy giữa các cách tiếp cận kiểu dáng khiến việc sử dụng lại các thành phần trực quan giữa các dự án gần như không thể

Với Tailwind, chúng tôi đã có thể chuẩn hóa CSS trên tất cả các dự án của mình. Bám sát một cách tiếp cận nhất quán giúp dễ dàng viết mã với tốc độ không đổi, phát triển bí quyết của nhóm mặt trước của chúng tôi và đạt được kết quả trực quan không có lỗi một cách nhanh chóng và đáng tin cậy. Việc sử dụng lại các thành phần trong các dự án khác nhau cũng dễ dàng hơn nhiều, ngay cả khi sử dụng các khung giao diện người dùng khác nhau

Cách chúng tôi làm việc trước khi có Tailwind

Trở lại năm 2015, nhóm của chúng tôi đã yêu thích Bootstrap. Các thành phần giao diện người dùng đi kèm giúp dễ dàng tạo các ứng dụng và trang web đẹp mắt, vì vậy chúng tôi đã làm điều đó. Có hiệu quả. Đúng. ?

Khi chúng tôi phát triển và các thiết kế của chúng tôi trở nên phức tạp hơn, chúng tôi bắt đầu sử dụng các kiểu tùy chỉnh được thêm vào trên Bootstrap. Về lâu dài, cách tiếp cận này đã làm tăng thêm sự phình to không cần thiết cho các dự án của chúng tôi và làm phức tạp cơ sở mã

Vấn đề thứ hai đã được giải quyết bằng cách giới thiệu BEM và chúng tôi đã cố gắng giải quyết vấn đề thứ nhất bằng cách thêm các lớp tiện ích. Rốt cuộc, tại sao chúng ta phải lặp lại mã của mình khi chúng ta có thể sử dụng lại các lớp một cách đơn giản. Rực rỡ. Vâng, không thực sự. Cách tiếp cận này khiến chúng tôi đặt câu hỏi - chúng tôi có cần Bootstrap không?

Có lẽ nếu chúng ta có thể gỡ bỏ Bootstrap và tạo một cơ sở tùy chỉnh cho các dự án của mình, điều đó sẽ tăng tốc công việc? . Chúng tôi đã loại bỏ Bootstrap, thiết lập Sass mixin, tạo ra một loạt các lớp tiện ích và đó là một mớ hỗn độn

Các nhà thiết kế của chúng tôi đã sử dụng các bố cục hơi khác nhau cho các dự án của họ, điều này buộc chúng tôi phải điều chỉnh các tiện ích mỗi lần hoặc thêm nhiều lớp tùy chỉnh vào từng dự án. Chúng tôi có thể dễ dàng khắc phục sự cố này bằng cách thêm một bộ sưu tập tiện ích cực lớn với các lớp không sử dụng được xóa và một tệp cấu hình để điều chỉnh chúng. Xem tôi đang đi đâu với dòng suy nghĩ này?

Tại thời điểm đó, nhóm của chúng tôi quyết định đã đến lúc quay lại bảng vẽ. Bước đầu tiên là nghiên cứu các giải pháp có sẵn

Tôi đã từng nghe nói về Tailwind, nhưng chỉ sau một số thử nghiệm cá nhân, tôi mới tin rằng đó là một giải pháp khả thi cho các vấn đề mà chúng tôi đang gặp phải. Với tư cách là một công ty, chúng tôi đã đạt đến điểm mà con đường tốt nhất mà chúng tôi có thể đi là phát minh lại Tailwind. Tiện ích? . Thanh trừng? . Cấu hình dễ dàng?

Việc khám phá lại Tailwind sau quá trình thử và sai nội bộ của chúng tôi thực sự là một điều may mắn. Chúng tôi biết những gì chúng tôi muốn, bây giờ là phần dễ dàng, phải không?

Đưa đội lên tàu

Chúng tôi đã tìm ra giải pháp của mình và chỉ cần thực hiện nó. Điều gì có thể đi sai?

Làm cho mọi người thay đổi cách làm việc của họ là một thách thức. Một số người trong nhóm rất ưa thích các khung khác như Bootstrap hoặc Bulma. Những người khác trong nhóm đã đầu tư rất nhiều vào React và muốn sử dụng các thành phần được tạo kiểu. Có thể hiểu được, mọi người đều mặc định framework và stack mà họ hiểu rõ nhất

Cùng với vấn đề ưu tiên, chúng tôi không có bất kỳ tiêu chuẩn nào để hỗ trợ phát triển Tailwind

Lúc đầu, việc chuyển sang Tailwind không trực quan. Câu hỏi lớn nhất là khi nào nên sử dụng Tailwind và khi nào tôi nên sử dụng các lớp tùy chỉnh?

Lúc đầu, việc sử dụng Tailwind “đúng cách” là điều khó đối với hầu hết nhóm của chúng tôi. Một số nhân viên của chúng tôi vẫn sử dụng các lớp tùy chỉnh bằng cách sử dụng @apply của Tailwind. Cách tiếp cận này đã được loại bỏ một cách may mắn sau một vài phiên đánh giá dự án và mã

Phương pháp tốt nhất để khuyến khích các nhà phát triển sử dụng các lớp Tailwind là gỡ lỗi hoàn toàn cơ sở mã được viết trên Tailwind. Mặc dù đánh dấu phức tạp hơn, nhưng việc gỡ lỗi các vấn đề về kiểu dáng sẽ dễ dàng và nhanh hơn nhiều khi chỉ sử dụng các lớp Tailwind

Được trang bị kiến ​​thức rằng việc gỡ lỗi các dự án hiện tại sẽ dễ dàng hơn, nhóm đã trở nên dễ tiếp thu hơn rất nhiều với ý tưởng cam kết hoàn toàn với Tailwind

Lợi ích của CSS Tailwind

Một khuôn khổ để cai trị tất cả

Nhóm của chúng tôi tập trung vào việc cung cấp mã chất lượng. Định nghĩa của chúng tôi về “mã chất lượng” có nghĩa là ít hoặc không có lỗi, có thể bảo trì đơn giản và khả năng mở rộng dễ dàng. Chúng tôi tò mò và thường muốn thử "điều lớn tiếp theo". Đó là lý do tại sao chúng tôi thử nghiệm khi thấy hợp lý. Đó là một thách thức để quản lý nhiều ngăn xếp (duh), vì vậy thật tuyệt khi có một mẫu số chung

Phương pháp tạo kiểu tóc của chúng tôi luôn được xây dựng dựa trên Tailwind. Quy trình được tiêu chuẩn hóa này giúp việc thử nghiệm và di chuyển các thành phần qua các ngăn xếp trở nên dễ dàng hơn một chút (nếu xảy ra sự cố). Nhờ áp dụng Tailwind CSS, chúng tôi linh hoạt hơn trong công việc hàng ngày của mình

Thiết kế với Tailwind CSS

Sau khi nhân viên kỹ thuật của chúng tôi áp dụng thành công, thật hợp lý khi chuyển Tailwind sang bộ phận thiết kế của chúng tôi. Không ích gì khi để một nửa nhóm cam kết tuân theo một khuôn khổ

Kể từ tháng 4 năm 2021, nhóm thiết kế của chúng tôi đã sử dụng Tailwind CSS làm hướng dẫn cho mọi dự án mới. Việc triển khai Tailwind trong quá trình thiết kế có nghĩa là chúng tôi không phải thay đổi quá nhiều so với cấu hình mặc định. Tất cả những gì chúng ta làm bây giờ là thay đổi màu sắc, phông chữ và điều chỉnh bóng hộp. Quy ước đặt tên cho các kiểu dáng và màu sắc khác nhau giống nhau trên toàn bộ thiết kế, giúp hợp tác và nắm bắt sớm các vấn đề về kiểu dáng

Tiện ích khung CSS đầu tiên

Một trong những điểm bán hàng chính của Tailwind là các lớp tiện ích. Các lớp tiện ích là các lớp có mục đích chung và có thể được sử dụng cho nhiều loại kiểu dáng khác nhau. Điều này làm cho chúng trở nên hoàn hảo để sử dụng trong nhiều ngữ cảnh, vì chúng có thể được tái sử dụng dễ dàng và không yêu cầu bất kỳ kiến ​​thức cụ thể nào về Tailwind để sử dụng chúng

tạo kiểu nhanh hơn

Việc áp dụng hoàn toàn Tailwind đã có tác động tích cực đến hiệu quả của nhóm chúng tôi. Chúng tôi không dành nhiều thời gian để viết các lớp CSS tùy chỉnh và chúng tôi có thể di chuyển nhanh hơn nhờ các lớp tiện ích (khi chúng tôi bắt đầu sử dụng chúng đúng cách). Ngoài ra, việc gỡ lỗi các vấn đề về kiểu dáng giờ đây trở nên dễ dàng hơn bao giờ hết nhờ phương pháp chuẩn hóa mà Tailwind khuyến khích

khả năng đáp ứng

Dễ dàng xây dựng các bố cục đáp ứng phức tạp. Bạn có thể sử dụng các lớp tiện ích một cách tự do trên bất kỳ số lượng điểm dừng nào để làm cho thiết kế của bạn trở nên sống động một cách có điều kiện - không cần đến Kiểu toàn cầu

tùy biến cao

Tailwind CSS mang đến khả năng tùy chỉnh linh hoạt. Nó đi kèm với cấu hình mặc định tích hợp sẵn, nhưng bạn có thể dễ dàng ghi đè lên nó bằng cách thực hiện các thay đổi trong tệp cấu hình. Chìa khóa ở đây là dễ dàng truy cập vào mọi thứ thông qua một vị trí (bao gồm bảng phối màu và biểu định kiểu) trong khi vẫn sắp xếp mọi thứ ngăn nắp để chúng không bị mất kiểm soát trong quá trình phát triển nhanh

thành phần tốt hơn

Tailwind CSS giúp bạn dễ dàng chia nhỏ các kiểu của mình thành các thành phần nhỏ có thể tái sử dụng. Bằng cách này, bạn có thể tránh lặp lại và giữ mọi thứ ngăn nắp bằng cách tạo các lớp CSS cho mọi tính năng hoặc phần trên trang web thay vì chiếm dụng tất cả không gian trang bằng một biểu định kiểu lớn áp dụng trên toàn cầu

Tính nhất quán

Tailwind có rất nhiều lớp tạo sẵn cho kích thước và màu sắc sẽ giảm thiểu hoặc loại bỏ hoàn toàn nhu cầu triển khai hệ thống thiết kế của riêng bạn. Hoặc tốt hơn nữa là áp dụng các thông số kỹ thuật của Tailwind vào hệ thống thiết kế của riêng bạn

Việc để Tailwind dẫn đầu đã hợp lý hóa đáng kể quá trình chuyển giao giữa nhóm thiết kế và phát triển của chúng tôi, bởi vì các nhà phát triển giao diện người dùng của chúng tôi đã biết những gì trong Figma sẽ phù hợp với kết quả đầu ra của Tailwind

Bộ giao diện người dùng

Có một số bộ giao diện người dùng đẹp trên thị trường có thể tăng tốc mọi thứ. Giao diện người dùng Tailwind và Bộ công cụ giao diện người dùng Tailwind là hai giao diện mà chúng tôi đã điều tra

Chúng tôi có một nhà thiết kế nội bộ (xin chào Patryk. ), nhưng thậm chí, những thư viện này tiết kiệm rất nhiều thời gian

Chúng tôi thường gặp phải một tính năng cần được xây dựng, điều này thực sự khó khăn. Lịch dường như đã xuất hiện rất nhiều trong các ứng dụng mà chúng tôi đang phát triển. Có thể nhanh chóng kéo xuống một thành phần phức tạp và thực hiện một số chỉnh sửa là một điều may mắn

Điểm xấu & xấu của Tailwind

CSS của Tailwind không hoàn hảo. Và mặc dù nhóm nhỏ các nhà phát triển giao diện người dùng của chúng tôi đã áp dụng nó rất thành công, nhưng chúng tôi biết rằng nó có một số tác dụng. không tốt lắm

đánh dấu xấu xí

Đôi khi nó chỉ đơn giản là xấu. Đánh dấu lúc đầu có thể áp đảo

Chỉ cần xem phần đánh dấu Biểu ngữ này và bạn sẽ biết ý tôi là gì

  

    

      

        
          
        
        

           We announced a new product! 
          
            Big news! We're excited to announce a brand new product.
          
        
      
      

        
          Learn more
        
      
    
  

Đường cong học tập

Một vấn đề khác khi triển khai Tailwind là sự sụt giảm năng suất ban đầu mà chúng tôi nhận thấy. Đối với 2-3 dự án đầu tiên, các nhà phát triển của chúng tôi gặp vấn đề khi sử dụng Tailwind theo bản năng. Cần có thời gian để tìm hiểu Tailwind đến mức bạn có thể dễ dàng tạo đánh dấu mà không cần xem tài liệu

Việc giảm năng suất sẽ đảo ngược theo thời gian và chúng tôi đã thấy năng suất tăng 6-10% trong các nhóm của mình khi sử dụng Tailwind sau một vài tháng

khó khăn hoạt hình

Tailwind rất phù hợp để tạo các hoạt ảnh đơn giản, nhưng nếu bạn muốn tạo những hoạt ảnh phức tạp hơn với các chuyển động và hành động thì điều đó có thể khó khăn

Mặc dù có một số tùy chọn tích hợp sẵn cho phép thực hiện loại điều này, nhưng chúng không phải lúc nào cũng đủ--đặc biệt là khi các thư viện này không cung cấp tất cả các công cụ cần thiết để đạt được những gì chúng ta cần (nghĩ xem có bao nhiêu lớp

Gần đây, khi chúng tôi gặp tình huống này, chúng tôi đã chọn sử dụng vanilla CSS kết hợp với thư viện hoạt ảnh như GSAP

Nếu bạn đang tìm kiếm một framework mới, hãy thử Tailwind

Tailwind đã giúp chúng tôi hợp lý hóa quy trình làm việc và chuẩn hóa bộ công cụ của mình. Nó không phải là thuốc chữa bách bệnh cho tất cả các vấn đề về kiểu dáng, nhưng hóa ra nó lại hoàn toàn phù hợp với Clean Cam kết

Khi làm việc trên các dự án mới, chúng tôi có ít quyết định hơn để đưa ra. Di chuyển các thành phần giữa các dự án chưa bao giờ được dễ dàng hơn. Các nhà phát triển của chúng tôi có thể dễ dàng chuyển đổi giữa các cơ sở mã khác nhau mà không cần học (hoặc học lại) các phương pháp tạo kiểu duy nhất cho dự án này

Tailwind đã tiết kiệm rất nhiều thời gian và sự tỉnh táo của chúng tôi. Nếu bạn thích bài viết này, hãy xem blog Clean Cam kết để biết thêm

Các câu hỏi thường gặp

Bất cứ khi nào chúng tôi giải thích với khách hàng mới rằng chúng tôi sử dụng Tailwind, họ thường đặt ra rất nhiều câu hỏi cho chúng tôi. Dưới đây là những câu hỏi chúng tôi được hỏi thường xuyên nhất

CSS Tailwind của tôi tốt hơn Bootstrap?

Chúng tôi có thể thiên vị vì chúng tôi đã coi Tailwind là thông lệ tiêu chuẩn, nhưng chúng tôi sẽ lập luận mạnh mẽ rằng CSS của Tailwind tốt hơn Bootstrap

Bootstrap giờ đã là công nghệ "cũ". Nó được thực hiện bởi Twitter vào giữa năm 2010. Chỉ vì một cái gì đó cũ không có nghĩa là nó không tuyệt vời, nhưng theo ý kiến ​​​​của chúng tôi, Bootstrap là một khung được sử dụng quá nhiều và cảm thấy hơi rắc rối. Mặt khác, Tailwind cung cấp một cách để xây dựng các thiết kế tùy chỉnh theo cách tiếp cận được tiêu chuẩn hóa, nghĩa là ứng dụng sáng bóng mới của bạn trông không giống với mọi thứ trên thị trường

Mặc dù phần đánh dấu có vẻ hơi bận rộn, nhưng Tailwind là một khung CSS đẹp hơn và hiệu quả hơn Bootstrap. Không giống như Bootstrap, Tailwind cung cấp một tập hợp các lớp tiện ích cho phép bạn làm việc với những gì bạn cần

TôiTailwind CSS là một khung?

tôi không chắc là. Trang web Tailwind CSS chính thức thậm chí còn mô tả nó là "khung CSS ưu tiên tiện ích"

CSS Tailwind dùng để làm gì?

Tailwind được sử dụng để tạo kiểu cho giao diện người dùng một cách nhanh chóng và hiệu quả hơn so với CSS truyền thống. Nó cung cấp các lớp tiện ích để kiểm soát các biến xác định giao diện của giao diện người dùng, như phần đệm, lề, màu, bóng và phông chữ

Được viết bởi

Wojciech Kałużny

Cách cải thiện UX bằng cách sử dụng các tương tác vi mô

Tương tác vi mô là một cách tuyệt vời để cải thiện trải nghiệm người dùng (UX) trên trang web hoặc ứng dụng của bạn

Tim Davidson

9 phút đọc

Thiết kế SaaS. Phương pháp tiếp cận đầu tiên trên thiết bị di động

Mô hình phần mềm dưới dạng dịch vụ (SaaS) ngày càng trở nên phổ biến trong vài năm qua và không phải không có lý do

CSS của Tailwind có tốt hơn Bootstrap không?

Việc sử dụng Tailwind CSS có hại không?

Tailwind có nhanh hơn CSS không?