บทความนี้อธิบายรายละเอียดเกี่ยวกับขั้นตอนทั้งหมดในการสร้างค่าที่กำหนดล่วงหน้าใน Tailwind
จะสร้าง 'ค่าที่ตั้งไว้ล่วงหน้า' ใน Tailwind ได้อย่างไร
หางลม “ ค่าที่ตั้งไว้ล่วงหน้า ” ถือเป็นออบเจกต์การกำหนดค่าปกติที่ระบุการกำหนดค่าเดียวกันกับที่ระบุในไฟล์การกำหนดค่า “tailwind.config.js” ไฟล์ 'preset' ไม่ได้ถูกสร้างขึ้นตามค่าเริ่มต้น แต่สามารถสร้างได้โดยทำตามขั้นตอนด้านล่าง:
ขั้นตอนที่ 1: สร้างไฟล์ “Preset”
ขั้นแรก สร้าง “ preset.js ” ในโครงการ Tailwind และเพิ่มตัวเลือกการกำหนดค่าที่ต้องการทั้งหมด เช่น ส่วนขยาย การแทนที่ธีม การเพิ่มปลั๊กอิน และอื่นๆ อีกมากมาย:
// ตัวอย่างการตั้งค่าล่วงหน้า
โมดูล. การส่งออก = {
ธีม : {
สี : {
สีฟ้า : {
แสงสว่าง : '#85d7ff' ,
ค่าเริ่มต้น : '#1fb6ff' ,
มืด : '#009อาน' ,
} ,
สีชมพู : {
แสงสว่าง : '#ff7ce5' ,
ค่าเริ่มต้น : '#ff49db' ,
มืด : '#ff16d1' ,
} ,
สีเทา : {
มืดที่สุด : '#1f2d3d' ,
มืด : '#3c4858' ,
ค่าเริ่มต้น : 'ใน #c0cc' ,
แสงสว่าง : '#e0e6ed' ,
เบาที่สุด : '#f9fafc' ,
}
} ,
ครอบครัวอักษร : {
ปราศจาก : [ 'กราฟิก' , 'ซานเซอริฟ' ] ,
} ,
กด ' Ctrl+S ” เพื่อบันทึกไฟล์ด้านบน
ขั้นตอนที่ 2: แก้ไขไฟล์ “tailwind.config.js”
ถัดไป ไปที่ส่วน “ tailwind.config.js ” ไฟล์คอนฟิกูเรชัน ระบุชื่อพาธเทมเพลตและระบุ “ preset.js ” ไฟล์ที่มี “ ที่ตั้งไว้ล่วงหน้า ' คำสำคัญ:
โมดูล. การส่งออก = {
เนื้อหา : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
ที่ตั้งไว้ล่วงหน้า : [
( 'preset.js' )
]
}
กด ' Ctrl+S ” เพื่อบันทึกไฟล์
ขั้นตอนที่ 3: เรียกใช้แอปพลิเคชัน
ตอนนี้เรียกใช้ที่มีอยู่ “ โครงการด่วน ” ในเซิร์ฟเวอร์การพัฒนาโดยป้อนคำสั่งต่อไปนี้:
npm เรียกใช้ dev 
สุดท้าย คลิกที่ลิงค์ “localhost” เพื่อแสดงผลลัพธ์
เอาต์พุต
ดังที่เห็น เอาต์พุตส่งคืนโปรเจ็กต์ vite ด้วยสไตล์ 'Tailwind CSS'
บทสรุป
ใน Tailwind ให้สร้าง “ ที่ตั้งไว้ล่วงหน้า ” ในโครงการและระบุการกำหนดค่าทั้งหมดของ “ tailwind.config.js ” ไฟล์ในนั้น หลังจากนั้น ให้ระบุไฟล์ “preset.js” ในไฟล์ “tailwind.config.js” โดยใช้คีย์เวิร์ด “preset” ช่วย ไฟล์ “preset.js” ที่สร้างขึ้นใหม่จะฝัง CSS แบบกำหนดเองทั้งหมดบนเทมเพลตที่ระบุ เช่นเดียวกับไฟล์ “tailwind.config.js” บทความนี้แสดงขั้นตอนทั้งหมดในการสร้างค่าที่กำหนดล่วงหน้าใน Tailwind