Master Tailwind CSS ด้วยโหมด Just-in-Time (JIT)

เผยแพร่แล้ว: 2022-04-23

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

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

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

เราจะเน้นถึงคุณลักษณะและประโยชน์ของการใช้คอมไพเลอร์ Tailwind CSS JIT วิธีเปิดใช้งาน และดูตัวอย่างที่ใช้งานได้จริง

มาเริ่มกันเลย.

Tailwind CSS JIT (Just-in-Time) คอมไพเลอร์คืออะไร?

ก่อนที่เราจะพูดถึงคอมไพเลอร์แบบ just-in-time เราต้องพูดถึง Tailwind CSS ก่อน

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

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

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

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

ประโยชน์ของการใช้โหมด Tailwind CSS JIT

ในส่วนนี้ เราจะพูดถึงประโยชน์บางประการของการใช้คอมไพเลอร์ JIT พวกเขารวมถึง:

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

ข้อเสียของการใช้ Tailwind CSS JIT Compiler

ข้อจำกัดที่ทราบในปัจจุบันตามเอกสารประกอบของ JIT คอมไพเลอร์ GitHub คือ:

ไม่รองรับตัวเลือก PurgeCSS ขั้นสูง
“คุณสามารถ @apply คลาสที่เป็นส่วนหนึ่งของคอร์เท่านั้น สร้างโดยปลั๊กอิน หรือกำหนดไว้ภายในกฎ @layer คุณไม่สามารถ @apply ใช้คลาส CSS ที่กำหนดเองซึ่งไม่ได้กำหนดไว้ในกฎ @layer ”
รองรับเฉพาะ PostCSS 8 เท่านั้น

คำสั่ง @apply ใช้เพื่อใช้คลาสยูทิลิตี้ใน CSS ที่กำหนดเองของเรา สิ่งนี้มีประโยชน์เมื่อเรากำหนดสไตล์ CSS แบบกำหนดเอง แต่ต้องการใช้คลาสยูทิลิตี้ที่กำหนดไว้แล้ว นี่คือตัวอย่างวิธีการทำงานของคำสั่ง @apply :

 .my-custom-css { @apply text-green-500; }

ในโค้ดด้านบน เราได้เพิ่มสีเขียวให้กับคลาส CSS ที่กำหนดเอง ใช้สีเขียวโดยใช้คลาสยูทิลิตี้ Tailwind

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

วิธีเปิดใช้งานโหมด Tailwind CSS JIT

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

การเปิดใช้งานคอมไพเลอร์ JIT นั้นค่อนข้างง่าย สิ่งที่คุณต้องทำคืออัปเดตไฟล์ tailwind.config.js โดยเพิ่มคุณสมบัติโหมดซึ่งควรมีค่าเป็น 'jit'

นี่คือสิ่งที่ tailwind.config.js ของคุณควรมีลักษณะดังนี้:

 module.exports = { mode: 'jit', purge: ['./public/*.html'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }

บรรทัดที่จะเน้นเป็นส่วนที่เราเพิ่ม:

 โหมด: 'จิต'

ซึ่งช่วยให้เราใช้คุณสมบัติของคอมไพเลอร์ JIT ได้

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

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

ต่อไป เราจะมาดูการใช้งานจริงของคอมไพเลอร์ JIT

ซึ่งช่วยให้เราใช้คุณสมบัติของคอมไพเลอร์ JIT ได้

ต่อไป เราจะมาดูการใช้งานจริงของคอมไพเลอร์ JIT

วิธีใช้ Tailwind CSS JIT Compiler

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

ค่านิยมตามอำเภอใจ

กรณีต่างๆ อาจเกิดขึ้นโดยที่เราอยากจะใช้ค่านอกระบบการออกแบบที่สร้างไว้แล้ว ค่าเหล่านี้อาจเป็นค่าสี ช่องว่างภายใน ระยะขอบ ความกว้าง และอื่นๆ

คอมไพเลอร์ JIT ช่วยให้เราบรรลุเป้าหมายนี้ด้วยการใช้ค่าที่กำหนดเอง ค่าที่กำหนดเองเหล่านี้ทำให้เราสามารถแยกส่วนออกจากระบบการออกแบบและกำหนดค่าที่เรากำหนดเองได้ คุณจะเห็นค่าเหล่านี้ในไวยากรณ์นี้: [300px], [#FA8072]

ในการทำเช่นนี้ เราต้องซ้อนค่าไว้ในวงเล็บเหลี่ยมเพื่อให้ Tailwind รู้ว่าเรากำลังกำหนดค่าใหม่ในระบบการออกแบบของเรา นี่คือตัวอย่างด้านล่าง:

 <div class="mt-[300px] w-[500px]"> </div>

ในตัวอย่างข้างต้น เราได้ใช้ค่าใหม่สองค่า นั่นคือ 300px และ 500px ซึ่งไม่มีอยู่ในระบบการออกแบบตั้งแต่แรก ก่อนคอมไพเลอร์ JIT คุณอาจต้องกำหนดค่าเหล่านี้ในไฟล์ config.js ก่อน เพื่อให้ได้ผลเช่นเดียวกัน

ตัวอย่างต่อไปแสดงวิธีการกำหนดค่าสีใหม่ดังนี้:

 <p class="bg-[#FA8072] ">This paragraph has a salmon background </p>

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

ดิ้นรนกับการหยุดทำงานและปัญหา WordPress? Kinsta เป็นโซลูชันโฮสติ้งที่ออกแบบมาเพื่อช่วยคุณประหยัดเวลา! ตรวจสอบคุณสมบัติของเรา

แบบวางซ้อนได้

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

แต่ละตัวแปรคั่นด้วยเครื่องหมายทวิภาค

นี่คือตัวอย่าง:

 <button class="sm:dark:disabled:focus:hover:bg-blue-300">

โค้ดด้านบนสร้างปุ่มโดยปิดคุณสมบัติโฟกัสและเปลี่ยนเป็นสีน้ำเงินเมื่อวางเมาส์ไว้

องค์ประกอบหลอก

คอมไพเลอร์ JIT ช่วยให้เราสามารถจัดรูปแบบองค์ประกอบหลอกได้ องค์ประกอบหลอกใช้เพื่อจัดรูปแบบเฉพาะบางส่วนขององค์ประกอบ เช่น จัดรูปแบบตัวอักษรตัวแรกขององค์ประกอบ หรือการแทรกเนื้อหาก่อน/หลังองค์ประกอบ

นี่คือตัวอย่างบางส่วน:

 <p class="first-letter:bg-green-600"> First letter will have a green color </p>

ในตัวอย่างข้างต้น ตัวอักษรตัวแรก "M" จะมีสีเขียว

 <p class="selection:bg-green-600"> Highlight this text to see a green color. </p>

เมื่อคุณเน้นข้อความจากโค้ดด้านบน ข้อความนั้นจะมีสีพื้นหลังสีเขียว

สีเส้นขอบต่อด้าน

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

มาดูตัวอย่างกัน:

 <div class="border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400"> </div>

เราได้กำหนดสีเส้นขอบให้กับ div หลายแบบ — ขอบด้านบนเป็นสีแดง เส้นขอบด้านขวาเป็นสีน้ำเงิน เส้นขอบด้านล่างเป็นสีเหลือง และเส้นขอบด้านซ้ายเป็นสีเขียว

โหมด JIT ใน Tailwind CSS เวอร์ชัน 3

ตั้งแต่ Tailwind CSS เวอร์ชัน 3 ขึ้นไป คอมไพเลอร์ JIT จะถูกเปิดใช้งานโดยค่าเริ่มต้นเมื่อเราติดตั้ง Tailwind CSS ดังนั้นเราจึงไม่ต้องกังวลกับการเปลี่ยนแปลงใดๆ ในไฟล์ tailwind.config.js ซึ่งช่วยให้เราเข้าถึงคุณลักษณะทั้งหมดของคอมไพเลอร์ JIT ได้ทุกที่ ทั้งหมดที่เราต้องทำคือทำตามคำแนะนำในการติดตั้งสำหรับเวอร์ชันปัจจุบัน และเรากำลังดำเนินการอยู่

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

สรุป

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

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

อะไรเจ๋งๆ ที่คุณสร้างขึ้นโดยใช้คอมไพเลอร์ JIT? แบ่งปันความคิดของคุณในความคิดเห็นด้านล่าง