tailwindcss forms

@tailwindcss/แบบฟอร์ม

ปลั๊กอินที่ให้การรีเซ็ตพื้นฐานสำหรับสไตล์ของฟอร์มที่ทำให้องค์ประกอบของฟอร์มง่ายต่อการแทนที่ด้วยยูทิลิตี้

การติดตั้ง

ติดตั้งปลั๊กอินจาก npm:

 ติดตั้ง npm -D @tailwindcss/forms

จากนั้นเพิ่มปลั๊กอินลงในไฟล์ tailwind.config.js ของคุณ:

 // tailwind.config.jsmodule.exports = {
  ธีม: {// ...
  -
  ปลั๊กอิน: [require('@tailwindcss/forms'),// ...
  -

การใช้งานขั้นพื้นฐาน

ชมการสาธิตสด

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

ขณะนี้เราได้เพิ่มสไตล์ฟอร์มพื้นฐานที่เป็นมิตรต่อยูทิลิตี้สำหรับประเภทองค์ประกอบฟอร์มต่อไปนี้:

• input[type='text']

• input[type='password']

• input[type='email']

• input[type='number']

• input[type='url']

• input[type='date']

• input[type='datetime-local']

• input[type='month']

• input[type='week']

• input[type='time']

• input[type='search']

• input[type='tel']

• input[type='checkbox']

• input[type='radio']

• select

• select[multiple]

• textarea

ทุกองค์ประกอบได้รับการทำให้เป็นมาตรฐาน/รีเซ็ตเป็นรูปแบบที่เรียบง่ายและสอดคล้องกันทางสายตา ซึ่งง่ายต่อการปรับแต่งด้วยยูทิลิตี้ แม้แต่องค์ประกอบเช่น <select> หรือ <input type="checkbox"> ที่ปกติจะต้องรีเซ็ตด้วย appearance: none และปรับแต่งโดยใช้แบบกำหนดเอง ซีเอสเอส:

 <!-- คุณสามารถปรับแต่งช่องว่างภายในบนองค์ประกอบที่เลือกได้แล้วตอนนี้: --><select class="rounded-full px-4 py-3">
  <!-- ... --></select><!-- หรือเปลี่ยนสีช่องทำเครื่องหมายโดยใช้ยูทิลิตี้สีข้อความ: --><input type="checkbox" class="rounded text-pink-500" />

ตัวอย่างการปรับแต่งเพิ่มเติมและแนวทางปฏิบัติที่ดีที่สุดจะมาในเร็วๆ นี้

การใช้คลาสเพื่อจัดสไตล์

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

 <input type="email" class="form-input rounded-full px-4 py-3" /><select class="form-select ปัดเศษเต็ม px-4 py-3">
  <!-- ... --></select><input type="checkbox" class="form-checkbox rounded text-pink-500" />

นี่คือตารางที่สมบูรณ์ของคลาส form-* ที่ให้ไว้เพื่อใช้อ้างอิง:

ฐาน	ระดับ
[type='text']	form-input
[type='email']	form-input
[type='url']	form-input
[type='password']	form-input
[type='number']	form-input
[type='date']	form-input
[type='datetime-local']	form-input
[type='month']	form-input
[type='search']	form-input
[type='tel']	form-input
[type='time']	form-input
[type='week']	form-input
textarea	form-textarea
select	form-select
select[multiple]	form-multiselect
[type='checkbox']	form-checkbox
[type='radio']	form-radio

ใช้เฉพาะสไตล์สากลหรือคลาสเท่านั้น

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

หากการสร้างทั้งสไตล์และคลาสส่วนกลาง (พื้นฐาน) ทำงานได้ไม่ดีกับโปรเจ็กต์ของคุณ คุณสามารถใช้ตัวเลือก strategy เพื่อจำกัดปลั๊กอินให้เหลือเพียงวิธีใดวิธีหนึ่งเหล่านี้

 // tailwind.config.jsplugins: [
  need("@tailwindcss/forms")({strategy: 'base', // สร้างเฉพาะ global stylesstrategy: 'class', // สร้างคลาสเท่านั้น
  -

เมื่อใช้กลยุทธ์ base องค์ประกอบของฟอร์มจะถูกจัดสไตล์ทั่วโลก และไม่มีการสร้างคลาส form-{name}

เมื่อใช้กลยุทธ์ class องค์ประกอบของฟอร์มจะไม่ถูกจัดสไตล์แบบโกลบอล และจะต้องจัดสไตล์โดยใช้คลาส form-{name} ที่สร้างขึ้นแทน