เชี่ยวชาญ Tailwind CSS Variants: เจาะลึก Pseudo-Class และการจัดสไตล์ตามสถานะ

ในการพัฒนาเว็บสมัยใหม่ การสร้างอินเทอร์เฟซผู้ใช้ (UI) ที่ไม่เพียงแต่สวยงาม แต่ยังต้องไดนามิกและตอบสนองต่อการโต้ตอบของผู้ใช้เป็นสิ่งสำคัญยิ่ง นี่คือจุดที่พลังที่แท้จริงของเฟรมเวิร์กแบบ utility-first อย่าง Tailwind CSS ส่องประกาย ในขณะที่ utility classes ของมันให้คำตอบว่า "อะไร"—กฎสไตล์ที่เฉพาะเจาะจงที่จะนำไปใช้—variants ของมันให้คำตอบที่สำคัญว่า "เมื่อไหร่"

Variants คือเคล็ดลับสำคัญที่เปลี่ยนดีไซน์ที่หยุดนิ่งให้กลายเป็นประสบการณ์แบบอินเทอร์แอคทีฟ มันคือคำนำหน้าพิเศษที่ช่วยให้คุณสามารถใช้ utility classes ตามเงื่อนไข โดยขึ้นอยู่กับสถานะขององค์ประกอบ, การโต้ตอบของผู้ใช้, หรือแม้กระทั่งสถานะขององค์ประกอบอื่น ไม่ว่าจะเป็นการเปลี่ยนสีปุ่มเมื่อ hover, การจัดสไตล์อินพุตฟอร์มเมื่อ focus, หรือการแสดงข้อความเมื่อ checkbox ถูกเลือก, variants คือเครื่องมือสำหรับงานเหล่านี้

คู่มือฉบับสมบูรณ์นี้ออกแบบมาสำหรับนักพัฒนาทั่วโลก เราจะสำรวจขอบเขตทั้งหมดของ Tailwind CSS variants ตั้งแต่ pseudo-classes พื้นฐานอย่าง hover และ focus ไปจนถึงเทคนิคขั้นสูงที่ใช้ group และ peer สำหรับการโต้ตอบของคอมโพเนนต์ที่ซับซ้อน เมื่อจบแล้ว คุณจะมีความรู้ในการสร้างอินเทอร์เฟซที่ซับซ้อนและรับรู้สถานะได้ทั้งหมดภายใน HTML ของคุณ

ทำความเข้าใจแนวคิดหลัก: Variants คืออะไร?

โดยแก่นแท้แล้ว variant ใน Tailwind CSS คือคำนำหน้าที่คุณเพิ่มเข้าไปใน utility class โดยคั่นด้วยเครื่องหมายโคลอน (:) คำนำหน้านี้ทำหน้าที่เป็นเงื่อนไข โดย utility class ที่ตามหลังจะถูกนำไปใช้ก็ต่อเมื่อเงื่อนไขนั้นเป็นจริง

ไวยากรณ์พื้นฐานนั้นเรียบง่ายและเข้าใจง่าย:

variant:utility-class

ตัวอย่างเช่น ลองพิจารณาปุ่มธรรมดาๆ คุณอาจต้องการให้พื้นหลังเป็นสีน้ำเงินตามค่าเริ่มต้น แต่เป็นสีน้ำเงินเข้มขึ้นเมื่อผู้ใช้เลื่อนเมาส์ไปวางเหนือปุ่ม ใน CSS แบบดั้งเดิม คุณจะเขียนว่า:

            .my-button {
  background-color: #3b82f6; /* bg-blue-500 */
}

.my-button:hover {
  background-color: #2563eb; /* bg-blue-700 */
}
            

              
                Copy
              
            
          

ด้วย variants ของ Tailwind คุณจะได้ผลลัพธ์เดียวกันโดยตรงใน HTML ของคุณ ทำให้สไตล์ของคุณอยู่ร่วมกับมาร์กอัป:

            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>
            

              
                Copy
              
            
          

ในที่นี้ hover: คือ variant มันจะบอกให้ Just-In-Time (JIT) engine ของ Tailwind สร้างกฎ CSS ที่จะใช้ bg-blue-700 ก็ต่อเมื่อปุ่มอยู่ในสถานะ :hover เท่านั้น แนวคิดที่เรียบง่ายแต่ทรงพลังนี้คือรากฐานสำหรับการจัดสไตล์แบบอินเทอร์แอคทีฟทั้งหมดใน Tailwind CSS

Variants ที่ใช้บ่อยที่สุด: Interactive Pseudo-Classes

Pseudo-classes คือตัวเลือก CSS ที่กำหนดสถานะพิเศษขององค์ประกอบ Tailwind มี variants สำหรับ pseudo-classes ทั่วไปทั้งหมดที่คุณใช้ทุกวันเพื่อตอบสนองต่อการกระทำของผู้ใช้

hover Variant: การตอบสนองต่อเคอร์เซอร์เมาส์

hover variant เป็น variant ที่น่าจะถูกใช้บ่อยที่สุด มันจะใช้สไตล์เมื่อเคอร์เซอร์ของผู้ใช้อยู่เหนือองค์ประกอบ ซึ่งจำเป็นสำหรับการให้ผลตอบรับทางภาพแก่ลิงก์, ปุ่ม, การ์ด และองค์ประกอบที่คลิกได้อื่นๆ

ตัวอย่าง: คอมโพเนนต์การ์ดแบบอินเทอร์แอคทีฟ

เรามาสร้างการ์ดที่ยกตัวขึ้นและมีเงาที่เด่นชัดขึ้นเมื่อถูก hover ซึ่งเป็นรูปแบบที่พบบ่อยในการออกแบบ UI สมัยใหม่

            <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md 
             transition-all duration-300 
             hover:shadow-xl hover:-translate-y-1">
  <h3 class="text-xl font-medium text-black">Global Insights</h3>
  <p class="text-slate-500">Discover trends from around the world.</p>
</div>
            

              
                Copy
              
            
          

ในตัวอย่างนี้:

• hover:shadow-xl เปลี่ยน box-shadow ให้ใหญ่ขึ้นเมื่อ hover
• hover:-translate-y-1 เลื่อนการ์ดขึ้นเล็กน้อย สร้างเอฟเฟกต์ 'การยกตัว'
• เราเพิ่ม transition-all และ duration-300 เพื่อให้การเปลี่ยนแปลงสถานะเป็นไปอย่างราบรื่นและมีแอนิเมชัน

focus Variant: การจัดสไตล์เพื่อการเข้าถึงและอินพุต

focus variant มีความสำคัญอย่างยิ่งต่อการเข้าถึง (accessibility) มันจะใช้สไตล์เมื่อองค์ประกอบถูกเลือก ไม่ว่าจะด้วยการคลิกด้วยเมาส์หรือการนำทางไปยังองค์ประกอบนั้นด้วยคีย์บอร์ด (เช่น ด้วยปุ่ม 'Tab') มันมักใช้กับองค์ประกอบฟอร์ม เช่น inputs, textareas และ buttons

ตัวอย่าง: อินพุตฟอร์มที่จัดสไตล์อย่างดี

สถานะ focus ที่ชัดเจนจะบอกผู้ใช้ว่าพวกเขาอยู่ที่ไหนบนหน้าเว็บ ซึ่งสำคัญมากสำหรับการนำทางด้วยคีย์บอร์ดเพียงอย่างเดียว

            <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
<input type="email" id="email"
       class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md 
              text-sm shadow-sm placeholder-slate-400
              focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500">
            

              
                Copy
              
            
          

นี่คือสิ่งที่ focus: variants ทำ:

• focus:outline-none: ลบ outline ของ focus เริ่มต้นของเบราว์เซอร์ เราทำเช่นนี้เพื่อแทนที่ด้วยสไตล์ของเราเองที่สวยงามกว่า
• focus:border-sky-500: เปลี่ยนสีขอบเป็นสีฟ้าสว่าง
• focus:ring-1 focus:ring-sky-500: เพิ่มวงแหวนเรืองแสงด้านนอก (a box-shadow ring) ที่ละเอียดอ่อนด้วยสีเดียวกัน ทำให้สถานะ focus ยิ่งเด่นชัดขึ้น

active Variant: การจับการคลิกและการแตะ

active variant จะทำงานเมื่อองค์ประกอบกำลังถูกเปิดใช้งานโดยผู้ใช้—ตัวอย่างเช่น ขณะที่ปุ่มกำลังถูกกดลง มันให้การตอบสนองทันทีว่าการคลิกหรือการแตะได้รับการลงทะเบียนแล้ว

ตัวอย่าง: ปุ่มที่มีเอฟเฟกต์ 'ถูกกด'

            <button class="bg-indigo-500 text-white font-semibold py-2 px-4 rounded-lg 
             shadow-md hover:bg-indigo-600 focus:outline-none 
             focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75 
             active:bg-indigo-700 active:translate-y-0.5">
  Submit
</button>
            

              
                Copy
              
            
          

ในปุ่มที่ปรับปรุงแล้วนี้:

• active:bg-indigo-700 ทำให้ปุ่มมีสีเข้มขึ้นอีกขณะที่กำลังถูกกด
• active:translate-y-0.5 ดันปุ่มลงเล็กน้อย สร้างเอฟเฟกต์การกดลงทางกายภาพ

Variants แบบโต้ตอบอื่นๆ: focus-within และ focus-visible

focus-within: variant ที่มีประโยชน์นี้จะใช้สไตล์กับองค์ประกอบ *แม่* เมื่อใดก็ตามที่องค์ประกอบ *ลูก* ของมันได้รับ focus เหมาะอย่างยิ่งสำหรับการจัดสไตล์กลุ่มฟอร์มทั้งหมดเมื่อผู้ใช้กำลังโต้ตอบกับอินพุตของมัน

            <div class="flex items-center space-x-2 p-4 border rounded-lg focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
  <!-- SVG Icon -->
  <svg class="h-6 w-6 text-gray-400">...</svg>
  <input type="text" placeholder="Search..." class="outline-none">
</div>
            

              
                Copy
              
            
          

ตอนนี้ เมื่อผู้ใช้ focus ที่ <input>, <div> ที่เป็นแม่ทั้งหมดจะได้รับขอบและวงแหวนสีน้ำเงิน

focus-visible: เบราว์เซอร์มีฮิวริสติกที่แตกต่างกันในการแสดงวงแหวน focus ตัวอย่างเช่น อาจไม่แสดงบนปุ่มหลังจากการคลิกเมาส์ แต่จะแสดงหลังจากการนำทางด้วยคีย์บอร์ด focus-visible variant ช่วยให้คุณสามารถใช้ประโยชน์จากพฤติกรรมที่ชาญฉลาดนี้ได้ โดยทั่วไปแล้ว ขอแนะนำให้ใช้ focus-visible แทน focus สำหรับการจัดสไตล์ outline/ring เพื่อมอบประสบการณ์ผู้ใช้ที่ดีขึ้นสำหรับทั้งผู้ใช้เมาส์และคีย์บอร์ด

การจัดสไตล์ตามสถานะ: Variants สำหรับฟอร์มและองค์ประกอบ UI

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

disabled Variant: การสื่อสารถึงการไม่พร้อมใช้งาน

เมื่อปุ่มหรืออินพุตฟอร์มมีแอตทริบิวต์ disabled มันจะไม่สามารถโต้ตอบได้ disabled variant ช่วยให้คุณสามารถจัดสไตล์สถานะนี้เพื่อให้ผู้ใช้เห็นภาพชัดเจน

            <button disabled class="bg-slate-300 text-slate-500 font-bold py-2 px-4 rounded cursor-not-allowed 
                     disabled:opacity-50">
  Processing...
</button>
            

              
                Copy
              
            
          

ในที่นี้ disabled:opacity-50 จะลดความทึบของปุ่มเมื่อมีแอตทริบิวต์ disabled ซึ่งเป็นวิธีปฏิบัติทั่วไปในการบ่งชี้สถานะที่ไม่ใช้งาน ยูทิลิตี้ cursor-not-allowed ยิ่งตอกย้ำสิ่งนี้

checked Variant: สำหรับ Checkboxes และ Radio Buttons

checked variant เป็นสิ่งจำเป็นสำหรับการสร้าง checkbox และ radio button แบบกำหนดเอง มันจะใช้สไตล์เมื่อแอตทริบิวต์ checked ของอินพุตเป็น true

ตัวอย่าง: checkbox ที่จัดสไตล์เอง

            <label class="flex items-center space-x-3">
  <input type="checkbox" class="appearance-none h-5 w-5 border border-gray-300 rounded-md 
                                checked:bg-blue-600 checked:border-transparent">
  <span class="text-gray-900 font-medium">Accept terms and conditions</span>
</label>
            

              
                Copy
              
            
          

เราใช้ appearance-none เพื่อลบสไตล์เริ่มต้นของเบราว์เซอร์ จากนั้นใช้ checked: variant เพื่อเปลี่ยนสีพื้นหลังเมื่อกล่องถูกเลือก คุณยังสามารถเพิ่มไอคอนเครื่องหมายถูกโดยใช้ pseudo-elements ::before หรือ ::after ร่วมกับ variant นี้ได้

Variants สำหรับการตรวจสอบความถูกต้องของฟอร์ม: required, optional, valid, invalid

ฟอร์มสมัยใหม่ให้ผลตอบรับการตรวจสอบความถูกต้องแบบเรียลไทม์ validation variants ของ Tailwind ใช้ประโยชน์จาก API การตรวจสอบข้อจำกัดของเบราว์เซอร์ variants เหล่านี้จะทำงานตามแอตทริบิวต์ เช่น required และสถานะความถูกต้องปัจจุบันของค่าอินพุต (เช่น สำหรับ type="email")

            <input type="email" required 
       class="border rounded-md px-3 py-2 
              invalid:border-pink-500 invalid:text-pink-600
              focus:invalid:border-pink-500 focus:invalid:ring-pink-500
              valid:border-green-500">
            

              
                Copy
              
            
          

ช่องอินพุตนี้จะมี:

• ขอบและข้อความสีชมพูหากเนื้อหาไม่ใช่อีเมลแอดเดรสที่ถูกต้อง (invalid:)
• ขอบสีเขียวเมื่อป้อนอีเมลแอดเดรสที่ถูกต้องแล้ว (valid:)
• วงแหวน focus จะเปลี่ยนเป็นสีชมพูด้วยหากช่องนั้นถูก focus ในขณะที่ข้อมูลไม่ถูกต้อง (focus:invalid:)

การโต้ตอบขั้นสูง: `group` และ `peer` Variants

บางครั้ง คุณจำเป็นต้องจัดสไตล์องค์ประกอบตามสถานะขององค์ประกอบ *อื่น* นี่คือจุดที่แนวคิดอันทรงพลังของ group และ peer เข้ามามีบทบาท พวกมันช่วยแก้ปัญหา UI ที่ก่อนหน้านี้ยากที่จะจัดการด้วย utility classes เพียงอย่างเดียว

พลังของ `group`: การจัดสไตล์องค์ประกอบลูกตามสถานะของแม่

group variant ช่วยให้คุณสามารถจัดสไตล์องค์ประกอบลูกตามสถานะขององค์ประกอบแม่ ในการใช้งาน คุณต้องเพิ่มคลาส group ไปยังองค์ประกอบแม่ที่คุณต้องการติดตาม จากนั้น บนองค์ประกอบลูกใดๆ คุณสามารถใช้ variants เช่น group-hover, group-focus เป็นต้น

ตัวอย่าง: การ์ดที่มีชื่อเรื่องและไอคอนที่เปลี่ยนสีพร้อมกันเมื่อ hover

            <a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 
                   hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <!-- SVG Icon -->
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white">...</svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New Project</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of templates.</p>
</a>
            

              
                Copy
              
            
          

วิธีการทำงาน:

1. เราเพิ่มคลาส group ไปยังแท็ก <a> ที่เป็นแม่
2. เมื่อผู้ใช้ hover เหนือลิงก์ทั้งหมด สีพื้นหลังจะเปลี่ยนไปเนื่องจาก hover:bg-sky-500
3. ในขณะเดียวกัน คลาส group-hover:stroke-white บน SVG และ group-hover:text-white บนองค์ประกอบข้อความจะถูกเปิดใช้งาน ทำให้สีของพวกมันเปลี่ยนเป็นสีขาว

สิ่งนี้สร้างเอฟเฟกต์ hover ที่สอดคล้องกันและเป็นองค์รวม ซึ่งหากเป็นวิธีอื่นอาจต้องใช้ CSS หรือ JavaScript แบบกำหนดเอง

การจัดสไตล์ Sibling ด้วย `peer`: ตัวเปลี่ยนเกมสำหรับฟอร์ม

peer variant คล้ายกับ group แต่มันทำงานสำหรับการจัดสไตล์องค์ประกอบที่เป็นพี่น้องกัน (sibling) คุณเพิ่มคลาส peer ไปยังองค์ประกอบหนึ่ง จากนั้นคุณสามารถใช้ variants เช่น peer-checked หรือ peer-invalid บนองค์ประกอบ sibling ที่ตามมาเพื่อจัดสไตล์ตามสถานะของ "peer" สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับคอนโทรลฟอร์มแบบกำหนดเอง

ตัวอย่าง: เลเบลที่เปลี่ยนแปลงเมื่อ checkbox ที่เกี่ยวข้องถูกเลือก

            <label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" class="sr-only peer">
  <div class="w-11 h-6 bg-gray-200 rounded-full 
            peer-focus:ring-4 peer-focus:ring-blue-300 
            peer-checked:after:translate-x-full peer-checked:after:border-white 
            after:content-[''] after:absolute after:top-0.5 after:left-[2px] 
            after:bg-white after:border-gray-300 after:border after:rounded-full 
            after:h-5 after:w-5 after:transition-all 
            peer-checked:bg-blue-600"></div>
  <span class="ml-3 text-sm font-medium text-gray-900 peer-checked:text-blue-600">
    Enable Notifications
  </span>
</label>
            

              
                Copy
              
            
          

นี่คือสวิตช์สลับ (toggle switch) ที่สมบูรณ์และเข้าถึงได้ซึ่งสร้างขึ้นโดยไม่ต้องใช้ JavaScript เลย!

1. checkbox <input> จริงถูกซ่อนไว้ด้วย sr-only (แต่ยังคงเข้าถึงได้โดยโปรแกรมอ่านหน้าจอ) และถูกทำเครื่องหมายเป็น peer
2. สวิตช์สลับที่มองเห็นได้คือ <div> ที่ถูกจัดสไตล์ให้ดูเหมือนรางที่มีตัวจับ (โดยใช้ pseudo-element ::after)
3. peer-checked:bg-blue-600 เปลี่ยนสีพื้นหลังของรางเมื่อ checkbox ที่ซ่อนอยู่ถูกเลือก
4. peer-checked:after:translate-x-full เลื่อนตัวจับไปทางขวาเมื่อ checkbox ถูกเลือก
5. peer-checked:text-blue-600 เปลี่ยนสีของข้อความเลเบล <span> ที่เป็น sibling

การรวม Variants เพื่อการควบคุมที่ละเอียดยิ่งขึ้น

หนึ่งในคุณสมบัติที่ทรงพลังที่สุดของ Tailwind คือความสามารถในการเชื่อมต่อ variants เข้าด้วยกัน สิ่งนี้ช่วยให้สามารถสร้างสไตล์ตามเงื่อนไขที่เฉพาะเจาะจงอย่างยิ่งได้

Variants แบบ Responsive และ State: คู่หูไดนามิก

คุณสามารถรวมคำนำหน้าแบบ responsive (เช่น md:, lg:) กับ state variants เพื่อใช้สไตล์เฉพาะบนขนาดหน้าจอบางขนาด *และ* ในสถานะบางสถานะเท่านั้น โดย responsive variant จะต้องมาก่อนเสมอ

ไวยากรณ์: breakpoint:state:utility-class

            <button class="bg-blue-500 text-white p-2 rounded 
             hover:bg-blue-600 
             md:bg-green-500 md:hover:bg-green-600">
  Responsive Button
</button>
            

              
                Copy
              
            
          

ปุ่มนี้จะ:

• เป็นสีน้ำเงินบนหน้าจอขนาดเล็ก และเปลี่ยนเป็นสีน้ำเงินเข้มขึ้นเมื่อ hover
• เป็นสีเขียวบนหน้าจอขนาดกลางขึ้นไป (md:bg-green-500) และเปลี่ยนเป็นสีเขียวเข้มขึ้นเมื่อ hover (md:hover:bg-green-600)

การซ้อน State Variants หลายตัว

คุณยังสามารถซ้อน state variants หลายตัวเพื่อใช้สไตล์เฉพาะเมื่อเงื่อนไขทั้งหมดเป็นจริงเท่านั้น สิ่งนี้มีประโยชน์สำหรับการปรับแต่งการโต้ตอบอย่างละเอียด

ตัวอย่าง: ปุ่มโหมดมืดที่ตอบสนองต่อ hover และ focus แตกต่างกัน

            <button class="p-2 rounded-full text-gray-400 
             dark:text-gray-500 
             hover:text-gray-600 dark:hover:text-gray-300 
             focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 
             dark:focus:ring-offset-gray-900 dark:focus:ring-gray-400
             dark:hover:focus:ring-gray-200">
  <!-- Icon here -->
</button>
            

              
                Copy
              
            
          

ในที่นี้ dark:hover:focus:ring-gray-200 จะใช้สีวงแหวนที่เฉพาะเจาะจงก็ต่อเมื่อโหมดมืดทำงาน, ปุ่มกำลังถูก hover, *และ* มี focus เท่านั้น ลำดับของ state variants โดยทั่วไปไม่มีผล เนื่องจาก Tailwind จะสร้างตัวเลือก CSS ที่ถูกต้องสำหรับการรวมกันนั้น

การปรับแต่งและกรณีเฉพาะ

แม้ว่า Tailwind จะมีชุด variants ที่ครอบคลุมมาให้ตั้งแต่ต้น แต่บางครั้งคุณก็ต้องการการควบคุมที่มากขึ้น

การใช้ Arbitrary Variants

สำหรับสถานการณ์เฉพาะที่คุณต้องการตัวเลือก CSS ที่ไม่มีใน variant ที่มีมาให้ คุณสามารถใช้ arbitrary variants ได้ นี่คือทางออกที่ทรงพลังอย่างยิ่งที่ช่วยให้คุณเขียนตัวเลือกที่กำหนดเองได้โดยตรงในแอตทริบิวต์ class ของคุณ โดยล้อมรอบด้วยวงเล็บเหลี่ยม

ตัวอย่าง: การจัดสไตล์รายการลิสต์ที่แตกต่างกัน

            <ul>
  <li class="[&:nth-child(odd)]:bg-gray-100 p-2">First item</li>
  <li class="[&:nth-child(odd)]:bg-gray-100 p-2">Second item</li>
  <li class="[&:nth-child(odd)]:bg-gray-100 p-2">Third item</li>
</ul>
            

              
                Copy
              
            
          

คลาส [&:nth-child(odd)]:bg-gray-100 จะสร้าง CSS สำหรับ li:nth-child(odd) ทำให้เกิดลิสต์ลายทางโดยไม่จำเป็นต้องเพิ่มคลาสพิเศษให้กับแต่ละรายการ

อีกหนึ่งการใช้งานทั่วไปคือการจัดสไตล์สำหรับลูกหลานโดยตรง:

            <div class="[&_>_p]:mt-4">
  <p>First paragraph.</p>
  <p>Second paragraph. This will have a top margin.</p>
  <div><p>Nested paragraph. This will NOT have a top margin.</p></div>
</div>
            

              
                Copy
              
            
          

คลาส [&_>_p]:mt-4 จะจัดสไตล์เฉพาะองค์ประกอบ `p` ที่เป็นลูกโดยตรงของ div เท่านั้น

การกำหนดค่า Variants ใน `tailwind.config.js`

โดยค่าเริ่มต้น JIT engine ของ Tailwind จะเปิดใช้งาน variants ทั้งหมดสำหรับปลั๊กอินหลักทั้งหมด อย่างไรก็ตาม หากคุณต้องการเปิดใช้งาน variants สำหรับปลั๊กอินของบุคคลที่สาม หรือต้องการลงทะเบียน variant ที่กำหนดเอง คุณจะต้องใช้ไฟล์ `tailwind.config.js` ของคุณ

            // tailwind.config.js
module.exports = {
  // ...
  plugins: [
    function({ addVariant }) {
      addVariant('child', '& > *');
      addVariant('child-hover', '& > *:hover');
    }
  ],
}

            

              
                Copy
              
            
          

ปลั๊กอินที่กำหนดเองนี้จะเพิ่ม `child` และ `child-hover` variants ใหม่ ซึ่งคุณสามารถนำไปใช้เช่น child:text-red-500 เพื่อจัดสไตล์ลูกโดยตรงทั้งหมดขององค์ประกอบ

สรุป: พลังของ UI ที่ขับเคลื่อนด้วยสถานะ

Tailwind CSS variants เป็นมากกว่าแค่ความสะดวกสบาย พวกมันเป็นส่วนพื้นฐานของปรัชญา utility-first ด้วยการช่วยให้คุณสามารถอธิบายลักษณะขององค์ประกอบในทุกสถานะที่เป็นไปได้โดยตรงใน HTML, variants ช่วยให้คุณสร้างอินเทอร์เฟซผู้ใช้ที่ซับซ้อน แข็งแกร่ง และบำรุงรักษาง่ายอย่างยิ่ง

ตั้งแต่เอฟเฟกต์ hover ง่ายๆ ไปจนถึงคอนโทรลฟอร์มที่ซับซ้อนที่สร้างด้วย peer-checked และการผสมผสานหลายสถานะแบบ responsive ตอนนี้คุณมีชุดเครื่องมือที่ครอบคลุมสำหรับทำให้ดีไซน์ของคุณมีชีวิตชีวา พวกมันส่งเสริมแนวคิดแบบ component-based ที่ซึ่งตรรกะทั้งหมด—โครงสร้าง สไตล์ และสถานะ—ถูกห่อหุ้มไว้ในที่เดียว

เราได้ครอบคลุมพื้นฐานและสำรวจเทคนิคขั้นสูงแล้ว แต่การเดินทางยังไม่จบเพียงเท่านี้ วิธีที่ดีที่สุดในการเชี่ยวชาญ variants คือการใช้งานมัน ทดลองผสมผสานพวกมัน สำรวจรายการทั้งหมดในเอกสารทางการของ Tailwind CSS และท้าทายตัวเองให้สร้างคอมโพเนนต์แบบอินเทอร์แอคทีฟโดยไม่ต้องพึ่งพา CSS หรือ JavaScript แบบกำหนดเอง ด้วยการยอมรับพลังของการจัดสไตล์ที่ขับเคลื่อนด้วยสถานะ คุณจะสามารถสร้างประสบการณ์ผู้ใช้ที่รวดเร็วขึ้น สอดคล้องกันมากขึ้น และน่าพึงพอใจยิ่งขึ้นสำหรับผู้ชมทั่วโลก