โพสต์นี้แสดงทุกแง่มุมที่เป็นไปได้ในการเพิ่ม 'สไตล์พื้นฐาน' ใน Tailwind CSS
จะเพิ่มสไตล์ 'ฐาน' ใน Tailwind ได้อย่างไร
“Tailwind CSS” มาพร้อมกับสามวิธีต่อไปนี้ในการเพิ่มสไตล์ “ฐาน” ในเนื้อหา HTML ทั้งหมดหรือในองค์ประกอบเฉพาะ:
มาสำรวจทีละตัวกัน
ข้อกำหนดเบื้องต้น
ก่อนที่จะไปสู่การใช้งานจริง ขั้นแรกให้ดูที่โครงการที่สร้างขึ้นใหม่ชื่อ 'Linuxhint' ที่ใช้สำหรับเพิ่ม 'รูปแบบพื้นฐาน':
โครงสร้างไฟล์โครงการ
ตอนนี้ ไปที่ไฟล์ “index.html” และดูโค้ด HTML ของมัน:
< html >< ศีรษะ >
< ลิงค์ href = '/dist/output.css' ญาติ = 'สไตล์ชีต' >
< / ศีรษะ >
< ร่างกาย >
< ชั่วโมง2 ระดับ = 'ขีดเส้นใต้ข้อความ-ศูนย์อักษร-ข้อความตัวหนา-สีชมพู-600' > ยินดีต้อนรับสู่ Linuxint! < / ชั่วโมง2 >< br >
< h3 ระดับ = 'ศูนย์ข้อความแบบอักษร-ข้อความตัวหนา-ส้ม-600' > บทช่วยสอน: การเพิ่มสไตล์พื้นฐานใน Tailwind < / h3 >< br >
< / ร่างกาย >
ในบรรทัดรหัสด้านบน:
เอาต์พุต
ผลลัพธ์ของโค้ดด้านบนแสดงไว้ที่นี่:
ตอนนี้ ใช้วิธีการที่กล่าวถึงเพื่อปรับแต่งโค้ด HTML ด้านบนโดยเพิ่มสไตล์พื้นฐาน เรามาเริ่มกันที่เมธอด 'CSS' ของ Tailwind
วิธีที่ 1: ใช้ CSS เพื่อเพิ่ม 'รูปแบบพื้นฐาน' ใน Tailwind
วิธีที่ง่ายที่สุดและง่ายที่สุดในการเพิ่มสไตล์พื้นฐานให้กับองค์ประกอบ HTML เฉพาะคือการเพิ่มในไฟล์ CSS หลักของโปรเจ็กต์ มาดำเนินการนี้จริงโดยทำตามขั้นตอนที่กำหนด
ขั้นตอนที่ 1: เปิดไฟล์ CSS
ขั้นแรก เปิดไฟล์ CSS หลัก เช่น “ style.css ” ที่มีเลเยอร์ 'ฐาน', 'ส่วนประกอบ' และ 'ยูทิลิตี้' ในตัว:
ขั้นตอนที่ 2: เพิ่ม CSS
ถัดไป เพิ่มสไตล์ 'ฐาน' สำหรับองค์ประกอบ HTML เฉพาะ '
' และ '' โดยใช้คลาสโดยใช้ ' @นำมาใช้ ” คำสั่งในชั้น “ฐาน” ด้วยความช่วยเหลือของ “ @ชั้น ' คำสำคัญ. คำหลัก '@layer' เพิ่มคลาสที่กำหนดไว้ในเลเยอร์ 'ฐาน' ที่ระบุ: @ฐานชั้น {
ชั่วโมง2 {
@ใช้ข้อความ-3xl;
}
h3 {
@ใช้ข้อความ-xl;
}
}
ชั่วโมง2 {
@ใช้ข้อความ-3xl;
}
h3 {
@ใช้ข้อความ-xl;
}
}
ในบรรทัดรหัสข้างต้น ' ขนาดตัวอักษร ” คลาสใช้กับองค์ประกอบ “
” และ “” เพื่อขยายให้ใหญ่ขึ้นตามขนาดที่ระบุ ตามลำดับ:
บันทึก (Ctrl + S) ไฟล์
ขั้นตอนที่ 3: เอาต์พุต
ตอนนี้ รันโค้ดในเซิร์ฟเวอร์จริงและดูผลลัพธ์ดังนี้:
ที่นี่ เอาต์พุตแสดงว่าคลาส 'ขนาดตัวอักษร' ของ Tailwind ใช้กับองค์ประกอบที่ระบุในชั้นฐานสำเร็จแล้ว
บันทึก : วิธีการเดียวกันนี้ใช้กับคลาส CSS อื่นๆ ของ Tailwind
วิธีที่ 2: ใช้ปลั๊กอินเพื่อเพิ่ม 'สไตล์พื้นฐาน' ใน Tailwind
อีกวิธีที่มีประโยชน์ในการเพิ่มรูปแบบ 'ฐาน' คือการเขียน ' เสียบเข้าไป ” และใช้ “ เพิ่มฐาน () ' การทำงาน. ฟังก์ชันนี้ช่วยในการลงทะเบียนชั้นเรียนใหม่ใน “ ฐาน ” คำสั่งเลเยอร์ ฟังก์ชันนี้ใช้ในไฟล์ Tailwind “tailwind.config.js” มาทำกันจริง
ขั้นตอนที่ 1: กำหนดฟังก์ชัน “addBase()”
ขั้นแรก ให้ไปที่ส่วน “ tailwind.config.js ” ไฟล์คอนฟิกูเรชัน และเพิ่มสไตล์พื้นฐานจากปลั๊กอิน และเรียกใช้ฟังก์ชัน “addBase()”:
บันทึกไฟล์
ขั้นตอนที่ 2: เอาต์พุต
สุดท้าย รันโค้ด HTML ที่กำหนดและดูผลลัพธ์:
ดังที่เห็น คลาส 'ขนาดตัวอักษร' ของ Tailwind ที่กำหนดในฟังก์ชัน 'addBase()' เป็นวัตถุ JavaScript ถูกนำไปใช้กับองค์ประกอบ HTML ที่ระบุ
บทสรุป
สามารถเพิ่มสไตล์ฐานของ Tailwind ได้อย่างง่ายดายโดยใช้ ' ซีเอสเอส ” คลาสในไฟล์ CSS หลักและ “ เสียบเข้าไป ' กับ ' เพิ่มฐาน () ” ในไฟล์คอนฟิกูเรชัน เมธอด “CSS” ถือเป็นเมธอดที่ง่ายที่สุด เนื่องจากเมธอดจะกำหนดสไตล์พื้นฐานในเลเยอร์ “เบส” และนำไปใช้กับองค์ประกอบที่ระบุโดยอัตโนมัติ ในทางกลับกัน ส่วน 'ปลั๊กอิน' ของ ' tailwind.config.js ” ไฟล์ต้องการฟังก์ชัน “addBase()” เพื่อกำหนดรูปแบบพื้นฐานเป็นวัตถุ JavaScript โพสต์นี้แสดงทุกแง่มุมที่เป็นไปได้ในการเพิ่มสไตล์พื้นฐานใน Tailwind CSS