Tailwind CSS là một trong những thư viện CSS phổ biến và được sử dụng rộng rãi nhất hiện nay. Nó tận dụng các lớp tiện ích để xây dựng các thiết kế đáp ứng mà không cần phải viết CSS quá nhiều. Tailwind CSS không sử dụng các thành phần được tạo kiểu sẵn như Bootstrap hoặc Material UI.
Trong bài viết này, chúng ta sẽ tập trung vào cách xây dựng các biến thể tùy chỉnh cho một ứng dụng giao diện người dùng đa khách hàng (multi-tenant).
Hiểu rõ về biến thể trong Tailwind CSS
Biến thể Tailwind CSS là tập hợp các lớp được xác định trước cho phép nhà phát triển áp dụng các kiểu nhất định một cách có điều kiện. Bằng cách sử dụng các biến thể, nhà phát triển có thể tạo kiểu dáng khác nhau cho một thành phần hoặc phần tử theo các trạng thái khác nhau. Chẳng hạn, khi một nút bị vô hiệu hóa, biến thể disabled: có thể được sử dụng theo sau bởi lớp tiện ích để áp dụng một kiểu cụ thể.
Trong Tailwind, có nhiều biến thể được xác định trước mà chúng ta có thể phân loại thành năm loại:
- Biến thể đáp ứng: Các biến thể này được sử dụng để áp dụng các kiểu nhất định theo kích thước màn hình. Trong danh mục này, chúng ta có sm:, md:, max-lg:, v.v.
- Biến thể lớp giả: Các biến thể này được sử dụng để áp dụng kiểu dựa trên các điều kiện trạng thái cụ thể. Trong danh mục này, chúng ta có hover:, enabled:, checked:, v.v.
- Biến thể nhóm: Biến thể nhóm được sử dụng để tạo kiểu cho các phần tử theo trạng thái của nhóm mà phần tử đó thuộc về. Nó được viết là group:.
- Biến thể ngang hàng: Biến thể ngang hàng được sử dụng để tạo kiểu cho một phần tử dựa trên trạng thái của một phần tử ngang hàng. Trong trường hợp này, thành phần không nhất thiết phải thuộc về một nhóm, nó được tạo kiểu theo trạng thái của một thành phần song song. Nó được viết là peer:.
- Biến thể tùy chỉnh: Các biến thể tùy chỉnh được triển khai bằng API addVariant.
Tạo biến thể tùy chỉnh trong Tailwind CSS
Bạn có thể thêm một biến thể tùy chỉnh vào Tailwind CSS dưới dạng plugin bằng API addVariant. API này cho phép nhà phát triển mở rộng Tailwind CSS bằng cách triển khai các biến thể tùy chỉnh có thể được sử dụng giống như các biến thể tích hợp sẵn. Một biến thể tùy chỉnh nổi tiếng, hiện được áp dụng làm mặc định trong Tailwind CSS, là dark:, được sử dụng để áp dụng kiểu khi ứng dụng ở chế độ tối.
1. Tạo biến thể tùy chỉnh đơn giản
Đoạn mã dưới đây cho thấy cách một biến thể tùy chỉnh có thể được triển khai dưới dạng plugin trong tailwind.config.js:
const plugin = require('tailwindcss/plugin'); module.exports = { plugins: [ plugin(function({ addVariant }) { addVariant('custom', '&:optional'); }) ]
};
Chúng ta sử dụng hàm plugin từ tailwindcss/plugin, hàm này cho phép chúng ta truy cập vào phương thức addVariant. Phương thức addVariant nhận hai đối số: đối số đầu tiên là tên của biến thể và đối số thứ hai là định nghĩa của nó, có thể là một chuỗi hoặc một hàm để thêm hỗ trợ với các biến thể được xác định trước khác như group: và peer:.
2. Biến thể tùy chỉnh với bộ sửa đổi
Đối với bước này, chúng ta sẽ hiểu cách bộ sửa đổi có thể tạo phạm vi cho tất cả các tiện ích lớp con. Bộ sửa đổi dark: cho chế độ tối được triển khai tương tự.
Trước khi tìm hiểu sâu hơn, hãy cùng tìm hiểu cách bộ sửa đổi dark: hoạt động trong Tailwind CSS.
Để áp dụng kiểu chế độ tối cho các thành phần hoặc phần tử của chúng ta, chúng ta có thể sử dụng các cách tiếp cận sau:
<div className="text-white dark:text-black"></div>
Trong cách tiếp cận đầu tiên này, chúng ta thêm rõ ràng bộ sửa đổi vào phần tử để thay đổi kiểu của nó trong chế độ tối, điều này rất đơn giản. Tuy nhiên, một ứng dụng không chỉ là một div duy nhất; nó thường có hàng trăm thành phần với màu sắc khác nhau trong chế độ tối, điều này dẫn chúng ta đến cách tiếp cận thứ hai.
<html className="dark"> <div className="text-foreground"></div>
</html>
Trong cách tiếp cận thứ hai này, biến thể chỉ được áp dụng cho thẻ html, được coi là thẻ cấp cao nhất của ứng dụng hoặc trang của chúng ta. Chúng ta sử dụng tên màu tùy chỉnh, màu này thay đổi giá trị màu theo biến thể được đặt trên thẻ html cấp cao nhất.
Để đạt được mô hình này, chúng ta không chỉ cần một biến thể tùy chỉnh mà còn cần một bộ sửa đổi để sửa đổi tất cả các tiện ích lớp được phân bổ theo biến thể được áp dụng cho thẻ cấp cao nhất.
Dưới đây là cách thêm plugin với bộ sửa đổi:
plugin(function ({ addVariant, e }) { addVariant("dark", ({ modifySelectors, separator }) => { modifySelectors(({ className }) => { return `.dark .${e(`dark${separator}${className}`)}`; }); });
});
Trong mã này, hàm gọi lại từ hàm plugin cũng giải cấu trúc e, một hàm để thoát các chuỗi. Hàm gọi lại trả về một chuỗi xác định cách biến thể nên sửa đổi bộ chọn:
- .dark: Nhắm mục tiêu bất kỳ phần tử nào có lớp "dark."
- Dấu cách: Tạo một bộ kết hợp con cháu, được sử dụng để chọn các phần tử là con cháu của một phần tử khác.
- .: Bắt đầu một bộ chọn lớp mới.
- e(dark$ separator $ className ): Tạo tên lớp biến thể.
CSS được tạo sẽ trông như thế này:
.dark .dark\:text-foreground { /* styles here */
}
Bây giờ chúng ta đã hiểu cách tạo các biến thể tùy chỉnh đơn giản và các biến thể tùy chỉnh với bộ sửa đổi, chúng ta sẽ sử dụng các nguyên tắc này cho bài toán thiết kế giao diện người dùng đa khách hàng.
Thiết kế giao diện người dùng đa khách hàng với Tailwind CSS
Đối với bài viết này, chúng ta sẽ tập trung vào giao diện người dùng của kiến trúc đa khách hàng. Một ứng dụng giao diện người dùng đa khách hàng phục vụ nhiều khách hàng hoặc nhóm (khách hàng thuê) với một ứng dụng duy nhất mà không yêu cầu các phiên bản riêng biệt hoặc thay đổi mã cho mỗi khách hàng thuê.
1. Vấn đề và yêu cầu
Giả sử chúng ta có hai khách hàng thuê, TenantA và TenantB, cả hai đều có thương hiệu và loại dữ liệu khác nhau, nhưng họ dùng chung một ứng dụng giao diện người dùng. Màu thương hiệu của TenantA là xanh lục, trong khi TenantB là màu vàng. Cả hai khách hàng thuê đều là nhà hàng và sử dụng cùng một ứng dụng giao diện người dùng nhưng muốn nó phản ánh thương hiệu của họ.
2. Giải pháp
Để đáp ứng các yêu cầu của TenantA và TenantB, chúng ta sẽ thực hiện một số bước sau:
2.1. Xác định màu sắc chung Một chìa khóa để thiết kế giao diện người dùng đa khách hàng thành công là cấu trúc cơ sở tốt để xác định tên màu. Vì cả hai khách hàng thuê sẽ chia sẻ các thành phần giống nhau, chỉ khác nhau về kiểu dáng, tên màu phải giống nhau, với các giá trị khác nhau. Trong điểm nhập CSS, có thể là main.css, global.css hoặc index.css tùy thuộc vào cấu trúc, chúng ta xác định tên màu được gọi là branding-color ở cấp gốc dưới dạng biến CSS.
:root { .tenantA { --branding-color: #008000; } .tenantB { --branding-color: #FFFF00; }
}
2.2. Thiết lập màu sắc trong cấu hình Tailwind CSS Sau khi xác định màu thương hiệu chung, Tailwind CSS vẫn chưa nhận biết được màu sắc của chúng ta, vì vậy chúng ta cần thiết lập chúng trong tệp tailwind.config.js bên dưới đối tượng colors mở rộng.
module.exports = { extend: { colors: { "branding-color": "var(--branding-color)" } }
};
2.3. Tạo plugin khách hàng thuê Các màu được định cấu hình trong Tailwind, nhưng chúng không thể được sử dụng cho hai khách hàng thuê mà không cần tạo các plugin tương ứng của chúng với bộ sửa đổi.
const plugin = require('tailwindcss/plugin'); module.exports = { extend: { colors: { "branding-color": "var(--branding-color)" } }, plugins: [ plugin(function({ addVariant, e }) { addVariant("tenantA", ({ modifySelectors, separator }) => { modifySelectors(({ className }) => { return `.tenantA .${e(`tenantA${separator}${className}`)}`; }); }); addVariant("tenantB", ({ modifySelectors, separator }) => { modifySelectors(({ className }) => { return `.tenantB .${e(`tenantB${separator}${className}`)}`; }); }); }) ]
};
Bây giờ, chúng ta đã định cấu hình các plugin khách hàng thuê và chúng ta có thể dễ dàng sử dụng chúng để áp dụng các màu sắc khác nhau cho các khách hàng thuê khác nhau:
<html className="tenantA"> <div className="text-branding-color"></div>
</html>
<html className="tenantB"> <div className="text-branding-color"></div>
</html>
Thay đổi duy nhất là ở lớp trên thẻ cấp cao nhất, đủ để toàn bộ ứng dụng có giao diện khác biệt.
Kết luận
Vì các ứng dụng giao diện người dùng đa khách hàng thường lớn và phức tạp, nên các biến thể Tailwind CSS có thể được sử dụng để chuyển đổi màu sắc mượt mà và kiểm soát khả năng hiển thị của các thành phần khác nhau, tương tự như các biến thể mặc định thông thường.
Cảm ơn bạn đã theo dõi bài viết vừa rồi.