Thật khó để phóng đại tầm quan trọng của Cascading Style Sheets (CSS) đối với tất cả các trang web. Kể từ khi tiêu chuẩn CSS đầu tiên được xuất bản vào cuối năm 1996, chúng tôi đã tiến khá xa về tính năng và hệ sinh thái.
Một số framework đã xuất hiện và tỏ ra phổ biến, một trong những framework gần đây nhất là Tailwind CSS.
Trong bài đăng này, trước tiên chúng ta sẽ xem xét cách tiếp cận ưu tiên tiện ích của Tailwind trước khi đi sâu vào cách sử dụng nó trong ứng dụng Ruby on Rails. Bạn sẽ thấy Tailwind giúp bạn xây dựng những trang web xuất sắc như thế nào mà không cần CSS tùy chỉnh và các phiên gỡ lỗi kéo dài.
Hãy bắt đầu!
Tailwind CSS:Phương pháp tiếp cận ưu tiên tiện ích
Hầu hết các khung CSS (ví dụ:Foundation, Bootstrap hoặc Bulma) đều cung cấp các thành phần sẵn sàng sử dụng như nút và trường biểu mẫu, do đó bạn có thể nhanh chóng tập hợp các khối để định hình giao diện.
Thông thường, việc thêm một nút bằng Bootstrap trông như thế này:
Trong ví dụ này, một nút đơn giản được xác định và tạo kiểu bằng cách áp dụng btn và btn-primary các lớp học. btn-primary đặt màu phù hợp cho trường hợp sử dụng của chúng tôi. Tuy nhiên, giao diện đó không thể phù hợp với nhu cầu của chúng tôi, vì vậy chúng tôi thêm biểu định kiểu CSS tùy chỉnh để tùy chỉnh mọi thành phần:
Tailwind là một khái niệm "tiện ích là trên hết". Thay vì cung cấp các thành phần sẵn sàng sử dụng như các nút, nó có các lớp tiện ích cấp thấp mà bạn có thể soạn thảo để xây dựng các thiết kế tùy chỉnh. Do đó, nó khuyến khích một cách tiếp cận mang tính chức năng hơn để tạo kiểu, trong đó bạn áp dụng trực tiếp các lớp được xác định trước trong HTML của mình. Nó nhằm mục đích giảm thiểu nhu cầu về CSS tùy chỉnh và thúc đẩy tính nhất quán trong thiết kế thông qua các ràng buộc của các lớp tiện ích.
"Tiện ích là trên hết" có nghĩa là Tailwind cung cấp các lớp đơn mục đích mà bạn có thể kết hợp để xây dựng các thiết kế phức tạp.
Chúng ta hãy xem một số mã để so sánh Tailwind và Bootstrap. Đầu tiên, đây là cách Tailwind cho phép chúng ta tạo kiểu cho một nút đơn giản:
Có một loạt các lớp thành phần nút để định cấu hình:
- Màu nền
bg-blue-500: Mặc dù 'xanh lam' là màu được chọn trước, nhưng chúng ta có thể đặt sắc thái màu bằng số. Số càng cao thì màu càng đậm. - Màu nền khi di chuột:
hover:bg-blue-600. - Màu văn bản
text-white: Không cần số ở đây vì nó màu trắng; luôn có màu mặc định nếu bạn không chỉ định một số, chẳng hạn như với màu đỏ văn bản. - Khoảng đệm dọc
py-2: 'p' là phần đệm, 'y' dành cho trục tung, '2' là giá trị khoảng cách, không tính bằng pixel mà là tỷ lệ được xác định trong Tailwind. - Khoảng đệm ngang
px-4: Tương tự như trên, với 'x' là trục ngang. - Làm tròn các góc:
rounded.
Điều này có vẻ dài dòng hơn ví dụ Bootstrap, nhưng chỉ bằng cách thêm các lớp, chúng ta có thể điều chỉnh từng phần của kiểu. Chúng ta không cần tạo lớp CSS tùy chỉnh.
Bạn có thể không hài lòng với những màu này nhưng tin tốt là bạn có thể thêm màu tùy chỉnh. Chúng tôi sẽ đề cập đến vấn đề đó sau.
Lời nói trên cân
CSS rất mạnh khi nói đến khoảng cách (chẳng hạn như lề và phần đệm) và bạn có thể làm việc với pixel và rems (root-em, kích thước tương ứng với kích thước của phần tử gốc). Tuy nhiên, điều này có xu hướng khó khăn. Tailwind có thang đo khoảng cách riêng giúp che giấu sự phức tạp đồng thời giúp tăng tính cân xứng.
Theo mặc định, Tailwind cung cấp các giá trị từ 0 đến 96, mỗi bước tỷ lệ thuận với các bước khác. Ví dụ:giá trị 16 có khoảng cách gấp đôi 8 . Nhờ đó, chúng ta không cần phải thực hiện phép toán để làm việc với rems hoặc pixel. Chúng tôi có thể xác định các giá trị ưa thích của mình và sử dụng lại chúng trong suốt thiết kế của mình.
Đọc thêm về khoảng cách trong tài liệu của Tailwind CSS.
Thiết lập Tailwind trong môi trường Ruby on Rails
Ruby on Rails 7.x hỗ trợ trực tiếp Tailwind trong trình tạo ứng dụng của nó.
Chúng ta sẽ bỏ qua cấu hình thử nghiệm (-T) để tránh tạo thêm sự phức tạp không cần thiết cho bài viết này.
Tailwind có một tính năng gọn gàng giúp tạo tệp CSS mà ứng dụng của bạn cần. Các khung khác yêu cầu bạn phải bao gồm toàn bộ tệp CSS xác định khung (ngay cả những phần bạn không sử dụng). Ngược lại, Tailwind sẽ quét dự án của bạn và tạo tệp CSS chỉ chứa các lớp mà dự án của bạn cần.
Bạn cần phải chạy một chút tiện ích để thực hiện điều đó. Trong chế độ phát triển, bạn có thể chạy trình nền của trình theo dõi để cập nhật mọi thứ khi bạn làm việc:bin/rails tailwindcss:watch .
Bạn cũng có thể thêm trình nền của trình theo dõi vào Procfile của mình , sau đó sử dụng foreman hoặc overmind để bắt đầu web và css quy trình:
Bây giờ chúng ta hãy sử dụng nó trong một trang đích đơn giản:
Sau đó chúng ta có thể truy cập http://localhost:3000/landing/index.
Mổ xẻ trang đích của chúng tôi
Mỗi trang đích đều cần một tiêu đề. Trình tạo hoạt động vì chúng tôi đã định cấu hình ứng dụng của mình để sử dụng Tailwind làm khung CSS.
Chúng tôi tìm thấy thứ gì đó trông giống như HTML tiêu chuẩn ở đây. Chúng ta chỉ có hai lớp cho thẻ h1:
font-bold:để kiểm soát độ dày của phông chữ.text-4xl:để kiểm soát kích thước phông chữ.
Nếu chúng ta thay đổi text-4xl tới text-xl và tải lại trang, kiểu mới sẽ được tự động áp dụng. Nhìn vào thiết bị đầu cuối nơi Foreman đang chạy, bạn sẽ thấy Tailwind đã tạo lại một biểu định kiểu ở chế độ nền. Việc tích hợp Tailwind vào ứng dụng Ruby on Rails thật đơn giản (việc này dựa trên gem tailwindcss-rails).
Định cấu hình Tailwind cho Ruby on Rails
Bạn có thể chỉnh sửa config/tailwind.config.js để điều chỉnh cài đặt của Tailwind (ví dụ:để thêm màu bổ sung, chỉ định phông chữ sẽ sử dụng, điều chỉnh khoảng cách, v.v.).
Ví dụ:chúng ta có thể thêm màu "đồng" vào nền và văn bản của mình:
Lưu ý rằng các sắc thái rất hữu ích nhưng thay vào đó có thể được đặt tên. Ví dụ:nếu chúng ta chỉ cần ba sắc thái, chúng ta có thể sử dụng 'sáng', 'trung bình' và 'tối' thay vì số trong chế độ xem của mình.
Sau đó, chúng ta có thể sử dụng các sắc thái trong tiêu đề của mình:
Bạn có thể tìm thấy thông tin chi tiết về điều này trong README của tailwindcss-rails cũng như tài liệu CSS của Tailwind.
Đường dẫn tài sản
Chúng ta đã thấy bin/rails tailwindcss:watch như thế nào giữ cho bảng định kiểu của chúng tôi được cập nhật ở chế độ phát triển cục bộ. Nếu chúng ta cần xây dựng các bảng định kiểu chỉ một lần, chúng ta có thể sử dụng bin/rails tailwindcss:build thay vào đó.
Để sử dụng trong sản xuất, bạn có thể dựa vào bin/rails assets:precompile để gọi trực tiếp bin/rails tailwindcss:build .
Tìm hiểu thêm về quy trình nội dung cho các ứng dụng Ruby on Rails.
Tailwind cho Rails đang hoạt động
Hãy cùng xem một số cách sử dụng thực tế của Tailwind ở một số chế độ xem:biểu mẫu và thanh điều hướng phản hồi.
Một biểu mẫu đơn giản
Sử dụng trình tạo Ruby on Rails, chúng tôi tạo user tài nguyên:
Sau đó chúng ta có thể thay đổi users_controller.rb tập tin và tạo chế độ xem cho biểu mẫu.
Chúng tôi tạo kiểu riêng cho từng phần, điều chỉnh màu văn bản, màu nền, đường viền, phần đệm, lề, v.v. Ở đây không có gì ngoài Tailwind tiêu chuẩn, tuy nhiên chúng tôi tùy chỉnh biểu mẫu để phù hợp với nhu cầu của mình.
Thanh điều hướng đáp ứng
Chúng tôi có thể thêm các điểm dừng có điều kiện dựa trên chiều rộng tối thiểu của trình duyệt bằng cách sử dụng bất kỳ lớp tiện ích nào trong Tailwind. Ví dụ:tiêu đề sau sẽ đổi màu tùy theo kích thước cửa sổ:
Theo mặc định, màu sắc là màu xám đậm. Khi chiều rộng của cửa sổ trình duyệt nằm trong khoảng từ 640px đến 1024px, đó sẽ là màu xanh mòng két. Nếu chiều rộng của cửa sổ trên 1024px thì cửa sổ đó có màu tím.
Vì Tailwind cũng có thể xử lý các cột nên đây là ví dụ cho thấy độ rộng cột của một phần tử có thể thay đổi như thế nào dựa trên kích thước cửa sổ:
Nhãn "Trạng thái" kéo dài hai hoặc ba cột trong trường hợp này.
Ở đây, bằng cách sử dụng các tiện ích bố cục lưới của Tailwind, chúng tôi xác định một lưới:
- Độ rộng một cột theo mặc định (
grid-cols-1) - Sáu cột có chiều rộng trên 640px
- Tám cột có chiều rộng trên 768px
Điểm dừng và độ rộng của chúng:
sm:640pxmd:768pxlg:1024pxxl:1280px2xl:1536px
Như chúng ta đã thấy, Tailwind đơn giản hóa thiết kế trang và kiểu dáng của các thành phần.
Tailwind so với các khung khác
Bây giờ chúng ta đã hiểu cách sử dụng Tailwind, hãy cùng xem xét những điểm khác biệt chính của nó với các khung khác:
- Dựa trên tiện ích: Chúng tôi tạo kiểu cho từng thành phần bằng cách sử dụng các lớp CSS cụ thể, mỗi lớp tập trung vào các phần khác nhau của kiểu.
- Có được thứ chúng tôi cần: Chúng tôi chỉ nhận những phần chúng tôi cần để vận chuyển trang web của mình, giúp thời gian tải nhanh hơn; giúp tối ưu hóa thời gian xây dựng.
- Có thể mở rộng: Chúng tôi có thể mở rộng hoặc tùy chỉnh các giá trị mặc định của TailwindCSS thông qua một tệp cấu hình đơn giản.
- Dễ dàng tô màu: Chẳng hạn, không cần phải tìm ra cách tạo các sắc thái màu sáng hơn hoặc tối hơn để xử lý các tình huống di chuột.
- Dãn cách đơn giản: Thang ẩn và tỷ lệ giúp đơn giản hóa khoảng cách.
- Ít CSS tùy chỉnh hơn: Vì chúng tôi chỉ tập hợp các lớp thành các phần tử tạo kiểu nên chúng tôi ít dựa vào CSS tùy chỉnh hơn và có thể chia sẻ các kiểu (bao gồm cả chủ đề hoàn chỉnh) bằng cách sử dụng các tệp và đoạn mã HTML.
- Ruby on Rails thân thiện: Nhờ có đá quý Tailwind, mọi thứ đều được tích hợp vào bố cục và quy trình nội dung.
Kết thúc
Như chúng ta đã thấy, cách tiếp cận ưu tiên tiện ích của Tailwind rất phù hợp với Ruby on Rails. Chúng tôi không cần mất thời gian điều chỉnh Tailwind cho phù hợp với nhu cầu của mình bằng cách thêm các cấu hình tùy chỉnh phức tạp hoặc CSS tùy chỉnh bổ sung. Khi hình thành các chế độ xem và các phần của mình, chúng tôi có thể sử dụng các lớp tiện ích Tailwind để định hình và tạo kiểu cho chúng.
Nếu muốn tìm hiểu thêm, bạn có thể truy cập nhiều mẫu và thành phần có sẵn nhờ cộng đồng sôi động của Tailwind và các sản phẩm như TailwindUI (từ những người tạo ra Tailwind).
Chúc bạn viết mã vui vẻ!
Tái bút. Nếu bạn muốn đọc các bài đăng của Ruby Magic ngay khi chúng được đăng tải, hãy đăng ký nhận bản tin Ruby Magic của chúng tôi và không bao giờ bỏ lỡ một bài đăng nào!
Thomas Riboulet
Tác giả khách mời của chúng tôi, Thomas là Kỹ sư tư vấn cơ sở hạ tầng đám mây và phụ trợ có trụ sở tại Pháp. Trong hơn 13 năm, anh đã làm việc với các công ty khởi nghiệp và công ty để mở rộng quy mô đội ngũ, sản phẩm và cơ sở hạ tầng của họ. Ông cũng đã được xuất bản nhiều lần trên tạp chí GNU/Linux của Pháp và trên blog của mình.
Tất cả bài viết của Thomas Riboulet