การใช้ CSS Cascade Layers เพื่อจัดการรูปแบบที่กำหนดเองในโปรเจ็กต์ Tailwind PlatoBlockchain Data Intelligence ค้นหาแนวตั้ง AI.

การใช้ CSS Cascade Layers เพื่อจัดการสไตล์ที่กำหนดเองในโปรเจ็กต์ Tailwind

Time Stamp: 24 สิงหาคม 2022 9:11

หากคลาสยูทิลิตี้ทำสิ่งเดียวเท่านั้น โอกาสที่คุณไม่ต้องการถูกแทนที่ด้วยสไตล์ที่มาจากที่อื่น วิธีหนึ่งคือการใช้ !important เพื่อให้มั่นใจ 100% สไตล์จะถูกนำไปใช้ โดยไม่คำนึงถึงข้อขัดแย้งที่เฉพาะเจาะจง

ไฟล์กำหนดค่า Tailwind มี !important ตัวเลือกที่จะเพิ่มโดยอัตโนมัติ !important ทุกระดับอรรถประโยชน์ ใช้ไม่ผิดหรอกค่ะ !important วิธีนี้ แต่ปัจจุบันมีวิธีที่ดีกว่าในการจัดการกับความจำเพาะ โดยใช้ CSS Cascade เลเยอร์ เราสามารถหลีกเลี่ยงแนวทางหนัก ๆ ในการใช้ !important.

เลเยอร์คาสเคดช่วยให้เราจัดกลุ่มสไตล์เป็น “เลเยอร์” ลำดับความสำคัญของเลเยอร์จะเหนือกว่าความเฉพาะเจาะจงของตัวเลือกเสมอ ความเฉพาะเจาะจงมีความสำคัญภายในแต่ละชั้นเท่านั้น การสร้างลำดับชั้นที่สมเหตุสมผลช่วยหลีกเลี่ยงความขัดแย้งด้านสไตล์และสงครามเฉพาะ นั่นคือสิ่งที่ทำให้ CSS Cascade Layers เป็นเครื่องมือที่ยอดเยี่ยมสำหรับ การจัดการสไตล์ที่กำหนดเองควบคู่ไปกับสไตล์จากเฟรมเวิร์กของบุคคลที่สามเหมือนกับ Tailwind

แหล่งที่มาของ Tailwind .css file มักจะเริ่มดังนี้:

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

ลองมาดูที่ เอกสารทางการของ Tailwind เกี่ยวกับคำสั่ง:

คำสั่งคือกฎ at-rule เฉพาะของ Tailwind ที่กำหนดเอง ซึ่งคุณใช้ได้ใน CSS ที่มีฟังก์ชันพิเศษสำหรับโปรเจ็กต์ Tailwind CSS ใช้ @tailwind คำสั่งให้แทรก Tailwind's base, components, utilities และ variants สไตล์ลงใน CSS ของคุณ

ในไฟล์ CSS เอาต์พุตที่สร้างขึ้น จะมีการรีเซ็ต CSS ของ Tailwind หรือที่เรียกว่า พรีไลท์ — รวมเป็นส่วนหนึ่งของรูปแบบฐานก่อน ส่วนที่เหลือของ base ประกอบด้วยตัวแปร CSS ที่จำเป็นสำหรับ Tailwind ในการทำงาน components เป็นที่สำหรับให้คุณเพิ่มคลาสที่คุณกำหนดเอง คลาสยูทิลิตี้ใดๆ ที่คุณใช้ในมาร์กอัปของคุณจะปรากฏขึ้นเป็นลำดับถัดไป ตัวแปรคือสไตล์สำหรับสิ่งต่างๆ เช่น สถานะโฮเวอร์และโฟกัส และสไตล์ที่ตอบสนอง ซึ่งจะปรากฏเป็นครั้งสุดท้ายในไฟล์ CSS ที่สร้างขึ้น

ไทล์วินด์ @layer คำสั่ง

อย่างน่าสับสน Tailwind มีของตัวเอง @layer ไวยากรณ์ บทความนี้เกี่ยวกับมาตรฐาน CSS แต่ลองมาดูเวอร์ชันของ Tailwind กัน (ซึ่งจะถูกคอมไพล์ไปและจะไม่จบลงที่ CSS เอาต์พุต) The Tailwind @layer directive เป็นวิธีการใส่สไตล์พิเศษของคุณเองลงในส่วนที่ระบุของไฟล์ CSS เอาต์พุต

ตัวอย่างเช่น การผนวกสไตล์ของคุณเองเข้ากับ base สไตล์ คุณจะทำสิ่งต่อไปนี้:

@layer base {
  h1 {
    font-size: 30px;
  }
}

พื้นที่ components เลเยอร์จะว่างเปล่าโดยค่าเริ่มต้น — เป็นเพียงที่สำหรับวางคลาสของคุณเอง หากคุณกำลังทำสิ่งต่าง ๆ แบบ Tailwind คุณอาจจะใช้ @apply (แม้ว่าผู้สร้าง Tailwind เมื่อเร็ว ๆ นี้ แนะนำให้ต่อต้านมัน) แต่คุณยังสามารถเขียนคลาสได้ตามปกติ:

@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}

มาตรฐาน CSS นั้นมีประสิทธิภาพมากกว่ามาก ลองกลับไปที่นั้น…

ใช้มาตรฐาน CSS @layer

นี่คือวิธีที่เราสามารถเขียนสิ่งนี้ใหม่เพื่อใช้มาตรฐาน CSS @layer:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
}

ไม่เหมือนกับคำสั่ง Tailwind คำสั่งเหล่านี้จะไม่ถูกรวบรวม พวกเขาเข้าใจโดยเบราว์เซอร์ อันที่จริง DevTools ใน Edge, Chrome, Safari และ Firefox จะแสดงเลเยอร์ที่คุณกำหนดไว้

การใช้ CSS Cascade Layers เพื่อจัดการสไตล์ที่กำหนดเองในโปรเจ็กต์ Tailwind

คุณสามารถมีเลเยอร์ได้มากเท่าที่ต้องการ — และตั้งชื่อมันตามที่คุณต้องการ — แต่ในตัวอย่างนี้ สไตล์ที่กำหนดเองทั้งหมดของฉันอยู่ในเลเยอร์เดียว (my-custom-styles). บรรทัดแรกกำหนดลำดับชั้น:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

สิ่งนี้จะต้องให้ล่วงหน้า อย่าลืมใส่บรรทัดนี้ก่อนโค้ดอื่นที่ใช้ @layer. เลเยอร์แรกในรายการจะเป็น น้อยที่สุด ทรงพลัง และเลเยอร์สุดท้ายในรายการจะเป็น มากที่สุด ทรงพลัง. นั่นหมายความว่า tailwind-base คือ มีพลังน้อยที่สุด เลเยอร์และโค้ดใดๆ ในนั้นจะถูกแทนที่โดยเลเยอร์ที่ตามมาทั้งหมด นั่นก็หมายความว่า tailwind-utilities จะเหนือกว่าสไตล์อื่น ๆ เสมอ - โดยไม่คำนึงถึงลำดับต้นทางหรือความจำเพาะ. (ยูทิลิตี้และตัวแปร ได้ แยกกันเป็นชั้นๆ แต่ผู้ดูแล Tailwind จะทำให้แน่ใจว่าตัวแปรสำคัญกว่ายูทิลิตี้เสมอ ตราบใดที่คุณรวมตัวแปรไว้ด้านล่างคำสั่งยูทิลิตี้)

สิ่งใดก็ตามที่ไม่ได้อยู่ในเลเยอร์จะแทนที่ทุกสิ่งที่อยู่ในเลเยอร์ (โดยมีข้อยกเว้นประการหนึ่งคือสไตล์ที่ใช้ !important). ดังนั้น คุณยังสามารถเลือกที่จะออก utilities และ variants นอกชั้นใด ๆ :

@layer tailwind-base, tailwind-components, my-custom-styles;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

สิ่งนี้ซื้ออะไรเราจริง ๆ ? มีหลายครั้งที่ตัวเลือก CSS ขั้นสูงมีประโยชน์ มาสร้างเวอร์ชันของ .กันเถอะ :focus-within ที่ตอบสนองเฉพาะการโฟกัสของแป้นพิมพ์มากกว่าการคลิกเมาส์โดยใช้ปุ่ม :has ตัวเลือก (ซึ่งลงจอดใน Chrome 105). สิ่งนี้จะจัดรูปแบบองค์ประกอบหลักเมื่อลูกๆ ได้รับโฟกัส เปิดตัว Tailwind 3.1 ตัวแปรที่กำหนดเอง - เช่น <div class="[&:has(:focus-visible)]:outline-red-600"> — แต่บางครั้งก็ง่ายกว่าที่จะเขียน CSS:

@layer tailwind-base, my-custom-styles;
@layer tailwind-base {
  @tailwind base;
}

@tailwind utilities;

@layer my-custom-styles {
  .radio-container {
    padding: 4px 24px;
    border: solid 2px rgb(230, 230, 230);
  }
  .radio-container:has(:focus-visible) {
    outline: solid 2px blue;
  }
}

สมมติว่าเราต้องการแทนที่ outline-color ราคาเริ่มต้นที่ blue ไปที่สิ่งอื่น สมมติว่าองค์ประกอบที่เราใช้งานอยู่มีทั้งคลาส Tailwind .outline-red-600 และของเราเอง .radio-container:has(:focus-visible) ระดับ:

<div class="outline-red-600 radio-container"> ... </div>

ที่ outline-color จะชนะ?

โดยปกติความจำเพาะที่สูงขึ้นของ .radio-container:has(:focus-visible) จะหมายความว่าคลาส Tailwind ไม่มีผล แม้ว่าจะต่ำกว่าในลำดับต้นทางก็ตาม แต่ไม่เหมือน Tailwind @layer คำสั่งที่อาศัยลำดับต้นทาง มาตรฐาน CSS @layer ลบล้างความจำเพาะ

ด้วยเหตุนี้ เราจึงสามารถใช้ตัวเลือกที่ซับซ้อนในสไตล์ที่เรากำหนดเองได้ แต่ยังคงแทนที่ด้วยคลาสยูทิลิตี้ของ Tailwind เมื่อเราต้องการ โดยไม่ต้องหันไปใช้แบบหนักหน่วง !important การใช้งานเพื่อให้ได้สิ่งที่เราต้องการ

ประทับเวลา:

เพิ่มเติมจาก เคล็ดลับ CSS