CSS rất kỳ diệu nhưng tốn nhiều thời gian. Các trang web đẹp, có chức năng và có thể truy cập là một niềm vui khi sử dụng, nhưng việc viết CSS của riêng chúng tôi thật là mệt mỏi. Nhiều thư viện CSS, chẳng hạn như Bootstrap, đã bùng nổ trong những năm gần đây và Tailwind dẫn đầu gói vào năm 2021.
Mặc dù Rails không đi kèm với Tailwind nhưng bài viết này sẽ hướng dẫn bạn cách thêm Tailwind CSS vào một dự án Ruby on Rails mới, điều này sẽ giúp bạn tiết kiệm hàng giờ thực hiện thiết kế. Chúng tôi cũng sẽ giới thiệu sơ lược về thiết kế bằng cách sử dụng các lớp tiện ích của Tailwind! Phần đầu tiên của hướng dẫn này sẽ giải thích cách tạo một dự án Rails mới và thêm Tailwind ngay từ đầu. Trong phần sau, tôi sẽ chỉ cho bạn cách thêm Tailwind vào một dự án hiện có.
Tailwind CSS
Tailwind CSS trao quyền cho các nhà phát triển với các lớp tiện ích. Các lớp CSS được xác định trước này cung cấp cho bạn các khối xây dựng để tạo bất kỳ thiết kế nào trực tiếp từ HTML. Bạn có thể tạo kiểu cho bất kỳ phần tử HTML nào bằng cách thêm một hoặc nhiều lớp vào nó. Tailwind là một thư viện tiện ích khổng lồ đi kèm với tất cả các kiểu mà bạn có thể kết hợp để tạo các thiết kế tùy chỉnh nhanh hơn so với việc viết CSS của riêng bạn.
Ví dụ:bạn có thể tạo chế độ xem thẻ với tiêu đề đẹp bằng cách chỉ áp dụng một số lớp cho các phần tử bạn muốn tạo kiểu:
<div class="text-center max-w-sm rounded overflow-hidden shadow-lg">
<h1 class="text-3xl font-black">This is a styled header inside a styled card element.</h1>
</div>
Đây chính là nó! Bạn không cần phải xác định các lớp này và đấu tranh cẩn thận với CSS để làm cho nó trông như thế nào bạn muốn. Tailwind đã xác định đủ các lớp tiện ích này để đáp ứng các nhu cầu tạo kiểu phổ biến nhất.
Nó đã nhanh chóng đạt được sức hút trong năm ngoái như một cách để các nhà phát triển tiết kiệm thời gian trong khi vẫn tạo ra các giao diện được thiết kế tốt nhất quán. Một số nhà phát triển yêu thích Tailwind vì những lý do này và những người khác ghét nó vì sự lộn xộn mà nó tạo ra trong HTML của bạn.
Thiết lập Tailwind bằng ứng dụng Rails mới
Để đơn giản hơn, chúng tôi sẽ đề cập đến việc xây dựng một ứng dụng từ đầu và tạo một ứng dụng Rails mới. Chúng tôi sẽ sử dụng các phiên bản sau cho các ví dụ:
- Đường ray 6.1
- Ruby 3.0.0
rbenv là một cách rất chuẩn hóa để quản lý các phiên bản Ruby khác nhau. Nếu bạn có homebrew, bạn có thể cài đặt nó bằng brew install rbenv .
Nếu bạn đang sử dụng rbenv, bạn có thể cài đặt Ruby 3.0.0 với rbenv install 3.0.0 .
Sau đó, bạn có thể chuyển thư mục hiện tại của mình sang Ruby 3.0.0 với rbenv local 3.0.0 .
Nếu là phiên bản Ruby mới, bạn sẽ muốn sử dụng gem install rails .
Tạo một ứng dụng Rails mới
Bây giờ bạn đã sẵn sàng để sử dụng Rails 6.1 và Ruby 3.0, bạn có thể tạo một ứng dụng Rails mới bằng cách chạy rails new tailwind-example .Replace tailwind-example với bất kỳ tên nào khác cho dự án của bạn, nhưng lưu ý rằng bạn cũng sẽ phải hoán đổi nó trong bất kỳ tham chiếu mã / shell nào khác với tên dự án.
Tiếp theo, thay đổi thư mục dự án mới:cd tailwind-example .
Cuối cùng, phân phát cục bộ dự án của bạn để xác minh rằng mọi thứ đang hoạt động chính xác:rails server Sau đó, điều hướng đến localhost:3000 trong trình duyệt của bạn để xem trang chào mừng của Rails! Nếu bạn nhìn thấy một cái gì đó như thế này, bạn đang đi đúng hướng:
Với một ứng dụng Rails mới được thiết lập và chạy, bạn đã sẵn sàng thêm Tailwind và bắt đầu tạo giao diện nhanh hơn.
Cài đặt Tailwind CSS
Đầu tiên, thêm TailwindCSS làm phụ thuộc bằng cách chạy yarn add tailwindcss .
Tiếp theo, sử dụng lệnh sau để tạo tệp cấu hình tailwind ở vị trí thích hợp:npx tailwindcss init .
Bây giờ, hãy mở dự án của bạn và IDE bạn chọn (vượt qua mã VS!). Mở postcss.config.js tệp trong thư mục gốc của dự án của bạn và thêm require("tailwindcss"), vào danh sách hàng nhập khẩu. Đây là tệp postcss của tôi bây giờ trông như thế nào:
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require("tailwindcss"),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
Tiếp theo, tạo một tệp có tên application.css trong app/javascript . Bên trong tệp CSS, hãy thêm các lần nhập sau:
@import "tailwindcss/base";
@import "tailwindcss/utilities";
@import "tailwindcss/components";
Tiếp theo, thêm import "../application.css"; vào danh sách các lần nhập trong app/javascript/packs/application.js . Điều này mang lại nhập khẩu tailwind vào webpacker. Tệp sẽ giống như sau:
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so that it will be compiled.
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "../application.css";
Rails.start()
Turbolinks.start()
ActiveStorage.start()
Để sử dụng Tailwind trên ứng dụng của bạn, bạn phải nhập tham chiếu gói web này. Trong app/view/layouts/application.html.erb
Tailwind yêu cầu PostCSS 88 và Rails 6 vẫn chưa được cập nhật. Nhờ tài liệu của họ, chúng tôi có thể dễ dàng khắc phục sự cố này bằng cách cài đặt phiên bản tương thích của Tailwind. Chỉ cần chạy phần sau để khắc phục:
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Đang thử nghiệm
Để giới thiệu thư viện CSS mới của chúng tôi, chúng tôi sẽ tạo một chế độ xem, bộ điều khiển và mô hình mới. Điều này thật dễ dàng với giàn giáo Rails:rails generate scaffold User email:string password:string .
Tiếp theo, chạy di chuyển cơ sở dữ liệu để tạo bảng Người dùng:rake db:migrate .
Bây giờ chúng ta có một mô hình người dùng và các khả năng CRUD cơ bản với cả chế độ xem và hành động của bộ điều khiển. Hãy tiếp tục và đặt trang chỉ mục của người dùng làm trang gốc của ứng dụng của chúng tôi. Thực hiện việc này bằng cách thêm root 'users#index' đến config/routes.rb . Tệp định tuyến của bạn bây giờ sẽ trông giống như sau:
Rails.application.routes.draw do
root 'users#index'
resources :users
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end
Điều này hướng bất kỳ lưu lượng truy cập nào tại thư mục gốc của ứng dụng đến trang chỉ mục của người dùng của chúng tôi. Khởi động lại máy chủ Rails của bạn bằng rails server và khi bạn truy cập localhost:3000 bây giờ, bạn sẽ thấy một cái gì đó như thế này:
Điều này không thú vị lắm vì hai lý do:
- Không có người dùng.
- Nó xấu xí.
Thật dễ dàng để chúng tôi khắc phục sự cố đầu tiên bằng cách sử dụng chính ứng dụng. Tailwind sẽ giúp chúng ta với phần thứ hai. Hãy tiếp tục và nhấp vào liên kết "Người dùng mới" trên trang chỉ mục và tạo một vài người dùng có mật khẩu giả.
Bây giờ, để xác nhận rằng chúng tôi đã thiết lập Tailwind CSS phù hợp với dự án của mình, hãy thêm HTML sau vào đầu app/views/users/index.html.erb :
<div class="max-w-lg mx-auto mt-16 text-center max-w-sm rounded overflow-hidden shadow-lg p-10">
<h1 class="mb-4 text-3xl font-black">Here are all our users!</h1>
<p class="text-lg leading-snug">If this looks nice, it means Tailwind is set up properly.</p>
</div>
Đây chỉ là một div có tiêu đề và một đoạn bên trong. Mỗi cái đều được tạo kiểu với một chút CSS Tailwind. Như bạn có thể nói, tất cả những gì chúng tôi phải làm để tạo kiểu cho nó là thêm các lớp thích hợp vào từng phần tử. Nếu nó được định cấu hình đúng cách, trang người dùng của bạn sẽ giống như sau:
Giảm quy mô tài sản với PurgeCSS
Nội dung CSS Tailwind thực sự rất lớn. Như bạn có thể hình dung, định nghĩa của tất cả các lớp tiện ích đó cộng lại. Do đó, sẽ hợp lý khi chỉ bao gồm các định nghĩa mà bạn đang thực sự sử dụng. May mắn thay, Tailwind CSS đi kèm với thanh lọc tích hợp tính năng đó chỉ làm điều đó! Bạn thậm chí không phải chọn và chọn thủ công những gì ở lại và những gì sẽ đi.
Tất cả những gì bạn phải làm là cho cấu hình của Tailwind tìm ở đâu và nó sẽ tự động duyệt qua và xóa các định nghĩa của bất kỳ lớp CSS nào không được sử dụng. Điều này cho phép chúng tôi tối ưu hóa ứng dụng của mình cho kích thước tệp và hiệu suất trong khi vẫn giữ lại tùy chọn để sử dụng nhiều lớp tiện ích hơn tại bất kỳ thời điểm nào.
Mở tailwind.config.js tệp trong thư mục gốc của dự án. Bây giờ nó sẽ giống như thế này:
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Thuận tiện, tất cả những gì chúng ta phải làm là cung cấp đường dẫn tệp đến bất kỳ nơi nào mà chúng ta có thể đã sử dụng các lớp CSS Tailwind. Đối với ví dụ này, chúng tôi chỉ sử dụng Tailwind trong .html.erb của chúng tôi các tệp, vì vậy đó là tất cả những gì chúng tôi sẽ cung cấp đường dẫn cho. Tuy nhiên, nếu ứng dụng của bạn sử dụng giao diện người dùng nặng hơn, chẳng hạn như React hoặc Vue, bạn cũng sẽ muốn cung cấp các đường dẫn này.
Sau khi chúng tôi thêm đường dẫn của mình vào tệp cấu hình, nó sẽ giống như sau:
module.exports = {
purge: [
"./app/**/*.html.erb",
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Với cấu hình này, các lớp CSS không sử dụng sẽ bị loại trừ khi bạn biên dịch với NODE_ENV của mình đặt thành production .
Sử dụng Lớp CSS Tailwind để tiết kiệm thời gian
Toàn bộ điểm của Tailwind CSS là giúp bạn thiết kế tốt hơn, nhất quán hơn và nhanh hơn. Việc tạo kiểu cho trang của bạn cũng dễ dàng như thêm các tên lớp phù hợp. Việc xem qua tài liệu là vô cùng hữu ích để định hướng cho bản thân, nhưng hãy xem qua cách xây dựng quan điểm người dùng của chúng tôi để cung cấp cho bạn một số ý tưởng về cách tạo kiểu dễ dàng của Tailwind.
Tạo kiểu cho Trang Chỉ mục Người dùng
Điều đầu tiên chúng tôi sẽ làm cho trang chỉ mục của mình là đặt tất cả nội dung của bảng vào một div, vì vậy chúng tôi có thể áp dụng một số kiểu nói chung. Chúng tôi sẽ cung cấp cho div đó một lớp class="p-10" là 10px đệm. Chúng tôi cũng sẽ áp dụng một số kiểu cho thẻ h1 của chúng tôi cho người dùng. 3 lớp bạn sẽ thấy bên dưới chủ yếu là tự giải thích, nhưng cần lưu ý rằng mb-4 nghĩa là thêm 4px lề ở phía dưới. Sau những thay đổi này, trang Chỉ mục người dùng sẽ đọc như thế này:
<div class="max-w-lg mx-auto mt-16 text-center max-w-sm rounded overflow-hidden shadow-lg p-10">
<h1 class="mb-4 text-3xl font-black">Here are all our users!</h1>
<p class="text-lg leading-snug">If this looks nice, it means Tailwind is set up properly.</p>
</div>
<div class="p-10">
<h1 class="mb-4 text-4xl font-black">Users</h1>
<table>
<thead>
<tr>
<th>Email</th>
<th>Password</th>
<th colspan="3">Actions</th>
</tr>
</thead>
<tbody>
<% @users.each do |user| %>
<tr>
<td><%= user.email %></td>
<td><%= user.password %></td>
<td><%= link_to 'Show', user %></td>
<td><%= link_to 'Edit', edit_user_path(user) %></td>
<td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
<br>
<%= link_to 'New User', new_user_path %>
<div>
Điều này khá cơ bản, vì vậy hãy thêm gia vị cho nó một chút. Tôi đã thêm một số lớp cho bảng và nút, và mã kết quả của tôi là:
<div class="max-w-lg mx-auto mt-16 text-center max-w-sm rounded overflow-hidden shadow-lg p-10">
<h1 class="mb-4 text-3xl font-black">Here are all our users!</h1>
<p class="text-lg leading-snug">If this looks nice, it means Tailwind is set up properly.</p>
</div>
<div class="p-10">
<h1 class="mb-4 text-4xl font-black">Users</h1>
<table class="min-w-full table-auto">
<thead class="bg-gray-800 text-gray-300" >
<tr>
<th>Email</th>
<th>Password</th>
<th colspan="3">Actions</th>
</tr>
</thead>
<tbody>
<% @users.each do |user| %>
<tr class="border-4 border-gray-200">
<td><%= user.email %></td>
<td><%= user.password %></td>
<td><%= link_to 'Show', user %></td>
<td><%= link_to 'Edit', edit_user_path(user) %></td>
<td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
<br>
<%= link_to 'New User', new_user_path, class: "bg-indigo-500 text-white px-4 py-2 border rounded-md hover:bg-white hover:border-indigo-500 hover:text-black" %>
<div>
Việc thêm những thay đổi này dẫn đến trang chỉ mục người dùng của chúng tôi trông như thế này:
Tạo kiểu cho Trang Người dùng Mới
Trong khi chúng ta đang ở đó, hãy thiết kế lại trang "Người dùng mới" hiện có. Hiện tại, nó trông như thế này:
Đầu tiên, chúng tôi sẽ áp dụng các lớp mong muốn của chúng tôi trong chế độ xem mới cho người dùng. Đây là giao diện của tôi:
<div class="bg-grey-lighter min-h-screen flex flex-col">
<div class="container max-w-sm mx-auto flex-1 flex flex-col items-center justify-center px-2">
<div class="bg-white px-6 py-8 rounded shadow-lg text-black w-full">
<h1 class="mb-8 text-3xl text-center">Sign up</h1>
<%= render 'form', user: @user %>
<div class="text-center text-sm text-grey-dark mt-4">
By signing up, you agree to the
<a class="no-underline border-b border-grey-dark text-grey-dark" href="#">
Terms of Service
</a> and
<a class="no-underline border-b border-grey-dark text-grey-dark" href="#">
Privacy Policy
</a>
</div>
</div>
<div class="text-grey-dark mt-6">
Already have an account?
<%= link_to 'Sign In', '#', class: "no-underline border-b border-blue text-blue"%>
</div>
</div>
</div>
Bây giờ, điều đó khá tốt ngoại trừ bản thân biểu mẫu vẫn chưa được tạo kiểu! Trong app/views/users/_form.html.erb , chúng tôi vẫn cần thực hiện một số chỉnh sửa. Đây là giao diện của tôi:
<%= form_with(model: user) do |form| %>
<% if user.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>
<ul>
<% user.errors.each do |error| %>
<li><%= error.full_message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= form.label :email %>
<%= form.text_field :email, class: "block border border-grey-light w-full p-3 rounded mb-4" %>
</div>
<div class="field">
<%= form.label :password %>
<%= form.text_field :password, class: "block border border-grey-light w-full p-3 rounded mb-4" %>
</div>
<%= form.submit "Sign Up", class: "w-full text-center py-3 rounded bg-indigo-600 text-white hover:bg-green-dark focus:outline-none" %>
<% end %>
Đây là nhiều chỉnh sửa và một số lớp chúng tôi chưa nói đến, nhưng mọi thứ bạn cần đều được đề cập trong tài liệu. Sau khi áp dụng các lớp này, trang Người dùng Mới của chúng tôi bây giờ trông như thế này!
Thêm Tailwind vào ứng dụng hiện có
Tỷ lệ cược tốt là nếu bạn muốn sử dụng Tailwind, bạn không phải bắt đầu từ một phương tiện chặn trống. Bạn có thể có một dự án hiện có với rất nhiều CSS tùy chỉnh và thậm chí là các khung công tác khác, chẳng hạn như bootstrap. Điều đó hoàn toàn ổn!
Giả sử rằng ứng dụng hiện tại của bạn đang chạy với Webpacker, bạn có thể làm theo các bước được nêu trong "Cài đặt Tailwind CSS" mà không cần thay đổi! Nếu bạn chưa cài đặt webpacker, hãy thêm nó vào tệp gem, chạy bundle install và sau đó bundle exec rails webpacker:install , rồi làm theo các bước cài đặt Tailwind.
Sau đó, bạn có thể trộn và kết hợp với CSS hiện có và CSS Tailwind!
Chúc bạn tạo kiểu vui vẻ!