จะใช้ Hover, Focus และสถานะอื่น ๆ ใน Tailwind ได้อย่างไร

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

คู่มือนี้ให้ข้อมูลการใช้งานการวางเมาส์เหนือ โฟกัส และสถานะอื่นๆ ใน Tailwind

จะใช้ Hover, Focus และสถานะอื่น ๆ ใน Tailwind ได้อย่างไร

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

การใช้ Hover Variant ใน HTML

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

ขั้นตอนที่ 1: ใช้คุณสมบัติ “โฮเวอร์” ใน HTML
สร้างไฟล์ HTML และใช้คุณสมบัติโฮเวอร์กับองค์ประกอบบางส่วนในโค้ด หากต้องการมีแนวคิดให้ดูโค้ดที่ระบุด้านล่าง:

ในรหัสนี้:

• ปุ่มชื่อ “ โฮเวอร์ฉัน! ” ถูกสร้างขึ้นโดยแท็กปุ่ม
• “ บีจี-กรีน-500 ” ตั้งค่าสีพื้นหลังของปุ่มเป็นสีเขียว
• “ โฮเวอร์: bg-blue-500 ” เปลี่ยนสีของปุ่มจากสีเขียวเป็นสีน้ำเงินเมื่อเลื่อนเมาส์ไปเหนือปุ่ม
• ข้อความในปุ่มมีสีขาว “ ข้อความ-สีขาว ' และ ' แบบอักษรตัวหนา ” ทำให้แบบอักษรเป็นตัวหนา
• รูปร่างของปุ่มถูกกำหนดให้เป็นวงกลมโดย “ โค้งมน '.

ขั้นตอนที่ 2: ดูตัวอย่างผลลัพธ์
หลังจากรันโค้ดด้านบนแล้ว มุมมองสุดท้ายจะมีลักษณะดังนี้:

จะเห็นได้ว่าปุ่มเปลี่ยนสีเมื่อเลื่อนเคอร์เซอร์ของเมาส์ไปเหนือปุ่มนั้น

การใช้ Focus Variant ใน HTML

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

ขั้นตอนที่ 1: ใช้คุณสมบัติโฟกัสในโค้ด HTML
สร้างไฟล์ HTML และใช้คุณสมบัติโฟกัสกับองค์ประกอบที่ต้องการ หากต้องการรับการแสดงผล ให้พิจารณาโค้ดด้านล่าง:

ในรหัสนี้:

• “ ดิ้น ” คลาสสร้างดิ้น
• “ ปรับศูนย์ ” จัดแนวเนื้อหาให้อยู่ตรงกลาง
• “ รายการ-ศูนย์ ” คลาสปรับวัตถุไปที่กึ่งกลางของหน้าจอ
• “ h-หน้าจอ ” กำหนดขนาดหน้าจอตามวิวพอร์ต
• “ บีจี-บลู-200 ” ตั้งค่าสีพื้นหลังเป็นสีน้ำเงิน
• กล่องอินพุตประเภทข้อความถูกสร้างขึ้น
• “ โฟกัส: bg-green-300 ” เปลี่ยนสีกล่องอินพุตเป็นสีเขียวเมื่อผู้ใช้คลิก
• “ w-64 ” ตั้งค่าความกว้างเป็น 64px
• “ ชั่วโมง-10 ” ตั้งค่าความสูงเป็น 10px
• “ พิกเซล-4 ” เพิ่มช่องว่างภายใน 4px ที่ด้านบนและด้านซ้าย
• “ ไพ-2 ” เพิ่มช่องว่างภายใน 2px ที่ด้านบนและด้านล่าง

ขั้นตอนที่ 2: ดูตัวอย่างคุณสมบัติโฟกัส
บันทึกโค้ด HTML และเปิดหน้าเว็บที่สร้างขึ้น จากนั้นเลื่อนเคอร์เซอร์ไปที่ช่องป้อนข้อมูลแล้วคลิกที่มัน จากนั้นการเปลี่ยนแปลงด้านล่างจะเกิดขึ้น:

การใช้ตัวแปรที่ใช้งานอยู่ใน HTML

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

ไวยากรณ์

คุณสมบัติ CSS เฉพาะถูกนำไปใช้กับองค์ประกอบที่เลือก

ขั้นตอนที่ 1: ใช้ Active Variant ในโค้ด HTML
สร้างไฟล์ HTML และใช้คุณสมบัติที่ใช้งานกับองค์ประกอบบางอย่างซึ่งในกรณีด้านล่างคือปุ่ม:

ในรหัสนี้:

• “ บีจี-เขียว-600 ” ตั้งค่าสีพื้นหลังเป็นสีเขียว
• “ หน้า-4 ” เพิ่มช่องว่างภายใน 4px
• “ โค้งมน-md ” ทำให้ปุ่มมีลักษณะโค้งมน
• “ การเปลี่ยนแปลงการเปลี่ยนแปลง ” ใช้สำหรับแปลงปุ่มเป็นระยะเวลาสั้นๆ ซึ่งกำหนดโดย “ ระยะเวลา-400 การแปลง '.
• “ ใช้งานอยู่:มาตราส่วน-110 ” เปลี่ยนปุ่มให้ใหญ่ขึ้น

ขั้นตอนที่ 2: ดูตัวอย่างผลลัพธ์
บันทึกโค้ดด้านบนในไฟล์ HTML และดูตัวอย่างหน้าเว็บที่สร้างขึ้น หน้าเว็บจะมีลักษณะดังนี้:

จะเห็นได้ว่าขนาดของปุ่มจะเพิ่มขึ้นเมื่อเมาส์ถือไว้ และทันทีที่ปล่อย ปุ่มจะกลับสู่สถานะเริ่มต้น

บทสรุป

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