วิธีกำหนดค่าเส้นทางเทมเพลตใน Tailwind CSS

โพสต์นี้สาธิตขั้นตอนการกำหนดค่าเส้นทางเทมเพลตใน Tailwind CSS

วิธีกำหนดค่าเส้นทางเทมเพลตใน Tailwind CSS

“ tailwind.config.js ” ไฟล์การกำหนดค่าใช้เพื่อกำหนดค่าเส้นทางเทมเพลตที่ผู้ใช้ต้องการฝัง Tailwind CSS ไม่มีอยู่ตามค่าเริ่มต้น แต่สามารถสร้างได้ในโครงการโดยใช้ตัวจัดการแพ็คเกจ 'npm'

ส่วนนี้ดำเนินขั้นตอนที่จำเป็นในการกำหนดค่าพาธเทมเพลตในไฟล์ “tailwind.config.js”

บันทึก : หากต้องการใช้งาน “Tailwind CSS” ก่อนอื่นให้ติดตั้ง “ โหนด js ” สมัครในระบบของคุณผ่านลิงค์ที่ให้ไว้ “ https://nodejs.org/en ” เพื่อดำเนินการตามคำสั่ง

ขั้นตอนที่ 1: ติดตั้ง “TailwindCSS”
ขั้นแรก สร้างโครงการใหม่ชื่อ “Project1” และเปิดในโปรแกรมแก้ไขโค้ด ตอนนี้ เปิดเทอร์มินัลใหม่และติดตั้ง “Tailwind CSS” โดยใช้คำสั่งต่อไปนี้:

ในคำสั่งข้างต้น “ npm ” เป็นตัวจัดการแพ็กเกจโหนดที่ติดตั้ง “TailwindCSS” ดังนี้:

ผลลัพธ์ที่นี่แสดงว่าดาวน์โหลด “Tailwind CSS” และแพ็คเกจสำเร็จแล้ว

ขั้นตอนที่ 2: สร้างไฟล์การกำหนดค่า Tailwind
จากนั้น สร้างไฟล์กำหนดค่า Tailwind CSS “ tailwind.config.js ” เพื่อขยายการทำงาน เช่น การระบุพาธเทมเพลต HTML คลาสที่ผู้ใช้กำหนด และอื่นๆ อีกมากมายโดยใช้คำสั่งนี้:

เอาต์พุตแสดงว่าไฟล์คอนฟิกูเรชันที่ระบุถูกสร้างขึ้น ตอนนี้ ดูที่ “ tailwind.config.js ' ไฟล์:

ขั้นตอนที่ 3: เพิ่มคำสั่ง Tailwind ลงในไฟล์ CSS หลัก
ตอนนี้ สำหรับการเพิ่มฟังก์ชันพิเศษให้กับโปรเจ็กต์ Tailwind ที่สร้างขึ้น ให้เพิ่มคำสั่ง tailwind ที่มีอยู่ก่อนแล้ว 3 รายการต่อไปนี้ในหลัก ' style.css ' ไฟล์:

ในบล็อกรหัสด้านบน:

• ฐาน : เป็นเลเยอร์แรกของ “Tailwind CSS” ที่ปรับเปลี่ยนรูปแบบหน้าเว็บตามค่าเริ่มต้น เช่น สีพื้นหลัง สีข้อความ หรือชุดแบบอักษร
• ส่วนประกอบ : เลเยอร์ที่สองนี้มีอยู่ในคลาส 'คอนเทนเนอร์' ที่เพิ่มความกว้างตามขนาดเบราว์เซอร์ ในส่วนของผู้ใช้สามารถเพิ่มส่วนประกอบภายนอกที่สร้างขึ้นเอง
• สาธารณูปโภค : เป็นเลเยอร์ที่สามที่รวมคลาสสไตล์เกือบทั้งหมด เช่น เงา สี การเพิ่ม flex และคลาสอื่นๆ อีกมากมาย

สามารถดูคำสั่งเหล่านี้ได้ในหน้าต่างต่อไปนี้:

ขั้นตอนที่ 4: สร้าง CSS
ตอนนี้ สร้าง CSS โดยใช้เครื่องมือ Tailwind CLI โดยดำเนินการคำสั่งต่อไปนี้ มันจะสแกนไฟล์เทมเพลตทั้งหมดและสร้าง CSS ใน ' dist/output.css ' ไฟล์:

สามารถสังเกตได้ว่าคำสั่งดังกล่าวดำเนินการสำเร็จ ตอนนี้ โครงสร้างไฟล์ของ “project1” มีลักษณะดังนี้:

ขั้นตอนที่ 5: สร้างเทมเพลต HTML และกำหนดค่าเส้นทาง
สร้างเทมเพลต HTML ที่ผู้ใช้ต้องการฝัง 'Tailwind CSS' จากนั้นกำหนดค่าเส้นทางใน ' tailwind.config.js '. ก่อนอื่นมาดูเทมเพลต HTML ต่อไปนี้ ' index.html ”:

ในบรรทัดรหัสด้านบน:

• ส่วน 'หัว' ใช้ ' <ลิงค์> ” แท็กเพื่อเชื่อมโยงไฟล์ CSS ที่สร้าง/คอมไพล์แล้ว “ /dist/output.css ” ด้วยไฟล์ HTML ที่มีอยู่ “ index.html '.
• ส่วน 'ร่างกาย' ระบุ '

  ” แท็กที่กำหนดหัวข้อย่อยแรกโดยใช้คลาส Tailwind “ จัดข้อความ ” เพื่อปรับการจัดตำแหน่งที่ “กึ่งกลาง”, “ น้ำหนักตัวอักษร ” เป็น “ตัวหนา” ข้อความ “ สีข้อความ ” เพื่อเพิ่มสีที่ระบุ และปุ่ม “ สีพื้นหลัง ” เพื่อใช้สีพื้นหลังที่กำหนดตามลำดับ

• ต่อไป “

  ' และ '

  ” แท็กยังใช้คลาส Tailwind ที่กล่าวถึงข้างต้นเพื่อจัดรูปแบบเนื้อหา

กำหนดค่าเส้นทางเทมเพลต HTML
จากนั้นเปิด “ tailwind.config.js ” และเพิ่มลิงก์หรือเส้นทางในส่วน “เนื้อหา” ของไฟล์เทมเพลต HTML เช่น “index.html”:

กด ' Ctrl+S ” เพื่อบันทึกการเปลี่ยนแปลงใหม่

ขั้นตอนที่ 6: รันโค้ด HTML
สุดท้าย รันโค้ด HTML “index.html” ในเซิร์ฟเวอร์จริงและดูผลลัพธ์:

เอาต์พุต

ดังที่เห็น เอาต์พุตแสดงเนื้อหา HTML ที่จัดรูปแบบด้วยความช่วยเหลือของ Tailwind CSS

บทสรุป

CSS ของ Tailwind ใช้ ' tailwind.config.js ” ไฟล์คอนฟิกูเรชันเพื่อกำหนดค่าพาธเทมเพลต HTML ที่สร้างขึ้น มันระบุ ' เนื้อหา ” ซึ่งมีเส้นทางที่แน่นอนของเทมเพลต HTML ทั้งหมด ไฟล์ต้นฉบับที่มีชื่อคลาส Tailwind และคอมโพเนนต์ JavaScript โดยจะสแกนไฟล์ HTML ที่ระบุ จากนั้นติดตั้ง Tailwind CSS ในเนื้อหา โพสต์นี้แสดงขั้นตอนทั้งหมดในการกำหนดค่าเส้นทางเทมเพลตใน Tailwind CSS