Bài viết này trình bày chi tiết về quy trình hoàn chỉnh để tạo giá trị đặt trước trong Tailwind.
Cách tạo “Cài đặt sẵn” trong Tailwind?
Gió cùng chiều ' cài đặt trước ” được coi là các đối tượng cấu hình thông thường chỉ định cấu hình giống như được chỉ định trong tệp cấu hình “tailwind.config.js”. Tệp “đặt trước” không được tạo theo mặc định, tuy nhiên, tệp này có thể được tạo bằng cách thực hiện theo các bước dưới đây:
Bước 1: Tạo một tập tin “cài sẵn”
Đầu tiên, tạo một “ cài sẵn.js ” trong dự án Tailwind và thêm tất cả các tùy chọn cấu hình mong muốn, chẳng hạn như tiện ích mở rộng, phần ghi đè chủ đề, thêm phần bổ trợ, v.v.:
// Ví dụ đặt trước
mô-đun. xuất khẩu = {
chủ đề : {
màu sắc : {
màu xanh da trời : {
ánh sáng : '#85d7ff' ,
MẶC ĐỊNH : '#1fb6ff' ,
tối tăm : '#009 yên ngựa' ,
} ,
hồng : {
ánh sáng : '#ff7ce5' ,
MẶC ĐỊNH : '#ff49db' ,
tối tăm : '#ff16d1' ,
} ,
xám : {
đen tối nhất : '#1f2d3d' ,
tối tăm : '#3c4858' ,
MẶC ĐỊNH : 'trong #c0cc' ,
ánh sáng : '#e0e6ed' ,
nhẹ nhất : '#f9fafc' ,
}
} ,
phông chữGia đình : {
không có : [ 'đồ họa' , 'sans serif' ] ,
} ,
Nhấn ' Ctrl+S ” để lưu tập tin trên.
Bước 2: Chỉnh sửa File “tailwind.config.js”
Tiếp theo, điều hướng đến “ tailwind.config.js ” tệp cấu hình, chỉ định tên của đường dẫn mẫu cũng như chỉ định “ cài sẵn.js ” tập tin với “ cài đặt trước ” từ khóa:
mô-đun. xuất khẩu = {
nội dung : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
cài đặt trước : [
( 'đặt trước.js' )
]
}
Nhấn ' Ctrl+S ” để lưu tệp.
Bước 3: Chạy ứng dụng
Bây giờ, hãy chạy “ dự án nhanh ” trong máy chủ phát triển bằng cách nhập lệnh sau:
npm chạy dev 
Cuối cùng, nhấp vào liên kết “localhost” để hiển thị đầu ra.
đầu ra
Như đã thấy, đầu ra trả về một dự án vite với kiểu dáng “Tailwind CSS”.
Phần kết luận
Trong Tailwind, hãy tạo một “ đặt trước ” trong dự án và chỉ định tất cả các cấu hình của “ tailwind.config.js ” tập tin trong đó. Sau đó, chỉ định tệp “preset.js” trong tệp “tailwind.config.js” với sự trợ giúp của từ khóa “preset”. Tệp “preset.js” mới được tạo sẽ nhúng tất cả CSS tùy chỉnh vào mẫu đã chỉ định giống như tệp “tailwind.config.js”. Bài viết này trình bày quy trình hoàn chỉnh để tạo giá trị đặt trước trong Tailwind.