เป็นการยากที่จะกล่าวเกินจริงถึงความสำคัญของ Cascading Style Sheets (CSS) สำหรับทุกเว็บไซต์ นับตั้งแต่มาตรฐาน CSS ฉบับแรกได้รับการเผยแพร่ในช่วงปลายปี 1996 เราพัฒนาไปไกลมากเกี่ยวกับฟีเจอร์และระบบนิเวศ
เฟรมเวิร์กหลายรายการปรากฏขึ้นและได้รับความนิยม โดยหนึ่งในเฟรมเวิร์กล่าสุดคือ Tailwind CSS
ในโพสต์นี้ เราจะตรวจสอบแนวทางที่ให้ความสำคัญกับยูทิลิตี้ของ Tailwind ก่อน ก่อนที่จะเจาะลึกถึงวิธีใช้ในแอปพลิเคชัน Ruby on Rails คุณจะเห็นว่า Tailwind ช่วยคุณสร้างเว็บไซต์ที่ยอดเยี่ยมได้อย่างไรโดยไม่ต้องใช้ CSS ที่กำหนดเองและเซสชันการแก้ไขข้อบกพร่องที่ใช้เวลานาน
มาเริ่มกันเลย!
Tailwind CSS:แนวทางที่ให้ความสำคัญกับประโยชน์ใช้สอยเป็นหลัก
เฟรมเวิร์ก CSS ส่วนใหญ่ (เช่น Foundation, Bootstrap หรือ Bulma) มีส่วนประกอบที่พร้อมใช้งาน เช่น ปุ่มและฟิลด์แบบฟอร์ม ดังนั้นคุณจึงสามารถประกอบบล็อกเพื่อสร้างรูปร่างอินเทอร์เฟซได้อย่างรวดเร็ว
โดยทั่วไปแล้ว การเพิ่มปุ่มด้วย Bootstrap จะมีลักษณะดังนี้:
ในตัวอย่างนี้ ปุ่มธรรมดาถูกกำหนดและจัดสไตล์โดยใช้ 02 และ 16 ชั้นเรียน 23 กำหนดสีที่เหมาะสมสำหรับกรณีการใช้งานของเรา แต่อินเทอร์เฟซนั้นไม่สามารถตอบสนองความต้องการของเราได้ ดังนั้นเราจึงเพิ่มสไตล์ชีต CSS ที่กำหนดเองเพื่อปรับแต่งทุกองค์ประกอบ:
Tailwind เป็นแนวคิด "เน้นประโยชน์ใช้สอยเป็นหลัก" แทนที่จะจัดเตรียมส่วนประกอบที่พร้อมใช้งาน เช่น ปุ่ม กลับมีคลาสยูทิลิตี้ระดับต่ำที่คุณสามารถเขียนเพื่อสร้างการออกแบบที่กำหนดเองได้ ด้วยเหตุนี้ จึงสนับสนุนแนวทางการทำงานเพิ่มเติมในการจัดสไตล์ โดยคุณจะใช้คลาสที่กำหนดไว้ล่วงหน้าใน HTML ของคุณโดยตรง โดยมีจุดมุ่งหมายเพื่อลดความจำเป็นในการใช้ CSS แบบกำหนดเองและส่งเสริมความสอดคล้องของการออกแบบผ่านข้อจำกัดของคลาสยูทิลิตี้
"เน้นยูทิลิตี้เป็นอันดับแรก" หมายความว่า Tailwind มีคลาสอะตอมมิกที่มีจุดประสงค์เดียวซึ่งคุณนำมารวมกันเพื่อสร้างการออกแบบที่ซับซ้อนได้
มาดูโค้ดบางส่วนเพื่อเปรียบเทียบ Tailwind และ Bootstrap ก่อนอื่น นี่คือวิธีที่ Tailwind ช่วยให้เราจัดสไตล์ปุ่มง่ายๆ:
มีคลาสองค์ประกอบปุ่มหลายชุดที่ต้องกำหนดค่า:
- สีพื้นหลัง
34: แม้ว่า 'สีน้ำเงิน' จะเป็นสีที่เลือกไว้ล่วงหน้า แต่เราสามารถกำหนดเฉดสีด้วยตัวเลขได้ ยิ่งตัวเลขสูง สีก็จะเข้มขึ้น - สีพื้นหลังเมื่อโฮเวอร์:
49 . - สีข้อความ
56: ไม่ต้องระบุตัวเลขเพราะเป็นสีขาว จะมีเฉดสีเริ่มต้นเสมอหากคุณไม่ได้ระบุตัวเลข เช่น ข้อความเป็นสีแดง - ช่องว่างภายในแนวตั้ง
66: 'p' คือช่องว่างภายใน 'y' ใช้สำหรับแกนตั้ง '2' คือค่าระยะห่าง ไม่ใช่หน่วยพิกเซล แต่เป็นมาตราส่วนที่กำหนดใน Tailwind - ช่องว่างภายในแนวนอน
75: เช่นเดียวกับด้านบน โดยมี 'x' สำหรับแกนนอน - การปัดเศษมุม:
88 .
สิ่งนี้ดูละเอียดมากกว่าตัวอย่าง Bootstrap แต่เพียงเพิ่มคลาสเท่านั้น เราก็สามารถปรับสไตล์แต่ละส่วนของได้ เราไม่จำเป็นต้องสร้างคลาส CSS ที่กำหนดเอง
คุณอาจไม่พอใจกับสีเหล่านี้ แต่ข่าวดีก็คือคุณสามารถเพิ่มสีที่กำหนดเองได้ เราจะกล่าวถึงเรื่องนี้ในภายหลัง
คำพูดบนตาชั่ง
CSS มีประสิทธิภาพมากเมื่อพูดถึงการเว้นวรรค (เช่น ระยะขอบและช่องว่างภายใน) และคุณสามารถทำงานกับพิกเซลและ rems ได้ (root-em ซึ่งเป็นขนาดที่สัมพันธ์กับขนาดขององค์ประกอบรูท) แม้ว่าสิ่งนี้จะเป็นเรื่องยากก็ตาม Tailwind มาพร้อมกับสเกลระยะห่างของตัวเองซึ่งซ่อนความซับซ้อนในขณะเดียวกันก็ช่วยให้ได้สัดส่วนด้วย
ตามค่าเริ่มต้น Tailwind เสนอค่าระหว่าง 0 ถึง 96 โดยแต่ละขั้นตอนจะเป็นสัดส่วนกับขั้นตอนอื่นๆ ตัวอย่างเช่น ค่า 98 มีระยะห่างเป็นสองเท่าของ 102 . ด้วยเหตุนี้ เราจึงไม่จำเป็นต้องคำนวณเพื่อทำงานกับ rems หรือพิกเซล เราสามารถกำหนดค่าที่ต้องการและนำกลับมาใช้ใหม่ได้ตลอดการออกแบบของเรา
อ่านเพิ่มเติมเกี่ยวกับการเว้นวรรคในเอกสารประกอบของ Tailwind CSS
การตั้งค่า Tailwind ในสภาพแวดล้อม Ruby on Rails
Ruby on Rails 7.x รองรับ Tailwind โดยตรงในตัวสร้างแอปพลิเคชัน
เราจะข้ามการกำหนดค่าการทดสอบ (-T) เพื่อหลีกเลี่ยงการเพิ่มความซับซ้อนโดยไม่จำเป็นให้กับบทความนี้
Tailwind มีฟีเจอร์ที่สร้างไฟล์ CSS ที่แอปพลิเคชันของคุณต้องการ เฟรมเวิร์กอื่นๆ ต้องการให้คุณรวมไฟล์ CSS ทั้งหมดที่กำหนดเฟรมเวิร์ก (แม้แต่ส่วนที่คุณไม่ได้ใช้) ในทางตรงกันข้าม Tailwind จะสแกนโปรเจ็กต์ของคุณและสร้างไฟล์ CSS ที่มีเฉพาะคลาสที่โปรเจ็กต์ของคุณต้องการเท่านั้น
คุณต้องเรียกใช้ยูทิลิตี้เล็กน้อยเพื่อให้สิ่งนั้นเกิดขึ้น ในโหมดการพัฒนา คุณสามารถเรียกใช้ watcher daemon ที่จะคอยอัปเดตสิ่งต่างๆ ในขณะที่คุณทำงาน:116 .
คุณยังสามารถเพิ่ม watcher daemon ให้กับ 121 ของคุณได้ จากนั้นใช้ 132 หรือ 141 เพื่อเริ่มต้น 154 และ 164 กระบวนการ:
ตอนนี้เรามาใช้มันภายในหน้า Landing Page ธรรมดา:
จากนั้นเราสามารถไปที่ http://localhost:3000/landing/index.
การวิเคราะห์หน้า Landing Page ของเรา
หน้า Landing Page ทุกหน้าต้องมีชื่อ ตัวสร้างทำงานได้เนื่องจากเรากำหนดค่าแอปพลิเคชันให้ใช้ Tailwind เป็นเฟรมเวิร์ก CSS
เราพบสิ่งที่ดูเหมือน HTML มาตรฐานที่นี่ เรามีเพียงสองคลาสสำหรับแท็ก h1:
177 :เพื่อควบคุมน้ำหนักแบบอักษร181 :เพื่อควบคุมขนาดตัวอักษร
หากเราเปลี่ยน 192 ถึง 203 และโหลดหน้าซ้ำ รูปแบบใหม่จะถูกนำไปใช้โดยอัตโนมัติ เมื่อดูที่เทอร์มินัลที่ Foreman ทำงานอยู่ คุณจะเห็นว่า Tailwind ได้สร้างสไตล์ชีตในพื้นหลังอีกครั้ง นั่นเป็นวิธีที่ง่ายในการรวม Tailwind เข้ากับแอปพลิเคชัน Ruby on Rails (ซึ่งอาศัย tailwindcss-rails gem)
การกำหนดค่า Tailwind สำหรับ Ruby on Rails
คุณสามารถแก้ไข 215 ได้ ไฟล์เพื่อปรับการตั้งค่าของ Tailwind (เช่น หากต้องการเพิ่มสี ระบุแบบอักษรที่จะใช้ ปรับระยะห่าง ฯลฯ)
ตัวอย่างเช่น เราอาจเพิ่มสี "ทองแดง" ให้กับพื้นหลังและข้อความ:
โปรดทราบว่าเฉดสีมีประโยชน์แต่สามารถตั้งชื่อแทนได้ หากเราต้องการเพียงสามเฉดสี เราก็สามารถใช้ 'สว่าง' 'ปานกลาง' และ 'มืด' แทนตัวเลขในมุมมองของเราได้
จากนั้นเราสามารถใช้เฉดสีในชื่อของเรา:
คุณสามารถดูรายละเอียดเกี่ยวกับเรื่องนี้ได้ใน README ของ tailwindcss-rails gem และเอกสารประกอบ CSS ของ Tailwind
ไปป์ไลน์สินทรัพย์
เราได้เห็นแล้วว่า 224 ทำให้สไตล์ชีตของเราอัปเดตในโหมดการพัฒนาในเครื่อง หากเราจำเป็นต้องสร้างสไตล์ชีตเพียงครั้งเดียว เราสามารถใช้ 230 แทน.
สำหรับการใช้งานจริง คุณสามารถใช้ 243 ได้ เพื่อโทรโดยตรง 257 .
เรียนรู้เพิ่มเติมเกี่ยวกับไปป์ไลน์สินทรัพย์สำหรับแอปพลิเคชัน Ruby on Rails
ลมท้ายสำหรับ Rails ที่ใช้งานจริง
มาดูการใช้งานจริงของ Tailwind ในบางมุมมองกัน:แบบฟอร์มและแถบการนำทางที่ตอบสนอง
แบบฟอร์มง่ายๆ
การใช้ตัวสร้าง Ruby on Rails เราสร้าง 260 ทรัพยากร:
จากนั้นเราสามารถแก้ไข 274 ได้ ไฟล์และสร้างมุมมองสำหรับแบบฟอร์ม
เราจัดสไตล์แต่ละชิ้นแยกกัน ปรับสีข้อความ สีพื้นหลัง เส้นขอบ ช่องว่างภายใน ระยะขอบ ฯลฯ ไม่มีอะไรเกินกว่า Tailwind มาตรฐานที่นี่ แต่เราปรับแต่งแบบฟอร์มให้เหมาะกับความต้องการของเรา
แถบนำทางที่ตอบสนอง
เราเพิ่มเบรกพอยต์แบบมีเงื่อนไขตามความกว้างขั้นต่ำของเบราว์เซอร์ได้โดยใช้คลาสยูทิลิตี้ใดๆ ใน Tailwind ตัวอย่างเช่น ชื่อต่อไปนี้จะเปลี่ยนสีตามขนาดหน้าต่าง:
ตามค่าเริ่มต้น สีจะเป็นสีเทาเข้ม เมื่อความกว้างของหน้าต่างเบราว์เซอร์อยู่ระหว่าง 640px ถึง 1024px จะเป็นโทนสีน้ำเงินอมเขียว หากความกว้างของหน้าต่างสูงกว่า 1,024px แสดงว่าเป็นสีม่วง
เนื่องจาก Tailwind จัดการคอลัมน์ได้เช่นกัน ต่อไปนี้คือตัวอย่างที่แสดงให้เห็นว่าความกว้างของคอลัมน์ขององค์ประกอบสามารถเปลี่ยนแปลงตามขนาดหน้าต่างได้อย่างไร:
ในกรณีนี้ ป้ายกำกับ "สถานะ" ครอบคลุมสองหรือสามคอลัมน์
ที่นี่ เมื่อใช้ยูทิลิตี้เค้าโครงตารางของ Tailwind เรากำหนดตารางที่:
- ความกว้างหนึ่งคอลัมน์โดยค่าเริ่มต้น (
283) - ความกว้างหกคอลัมน์เหนือความกว้าง 640px
- แปดคอลัมน์กว้างกว่าความกว้าง 768px
เบรกพอยต์และความกว้าง:
291 :640px307 :768px319 :1024px329 :1280px339 :1536px
ดังที่เราได้เห็นแล้วว่า Tailwind ทำให้การออกแบบเพจและการจัดสไตล์ของส่วนประกอบต่างๆ ง่ายขึ้น
Tailwind เทียบกับเฟรมเวิร์กอื่นๆ
ตอนนี้เราเข้าใจวิธีใช้ Tailwind แล้ว เรามาตรวจสอบความแตกต่างที่สำคัญกับเฟรมเวิร์กอื่นๆ กัน:
- ตามยูทิลิตี้: เราจัดแต่งสไตล์ของแต่ละองค์ประกอบโดยใช้คลาส CSS ที่เฉพาะเจาะจง โดยแต่ละคลาสจะเน้นไปที่ส่วนต่างๆ ของสไตล์
- ได้รับสิ่งที่เราต้องการ: เราได้รับเฉพาะชิ้นส่วนที่จำเป็นในการจัดส่งเว็บไซต์ของเราเท่านั้น ทำให้โหลดได้เร็วขึ้น ที่ปรับเวลาในการสร้างให้เหมาะสมที่สุด
- ขยายได้: เราสามารถขยายหรือปรับแต่งค่าเริ่มต้นของ TailwindCSS ได้ผ่านไฟล์การกำหนดค่าง่ายๆ
- การแรเงาสีอย่างง่าย: ไม่จำเป็นต้องหาวิธีสร้างเฉดสีที่อ่อนลงหรือเข้มขึ้นเพื่อจัดการกับสถานการณ์ที่เลื่อนไปมา เป็นต้น
- การเว้นวรรคแบบธรรมดา: สเกลที่ซ่อนอยู่และเป็นสัดส่วนทำให้การเว้นวรรคง่ายขึ้น
- CSS ที่กำหนดเองน้อยลง: เนื่องจากเราประกอบคลาสเข้ากับองค์ประกอบสไตล์เท่านั้น เราจึงพึ่งพา CSS ที่กำหนดเองน้อยลง และสามารถแชร์สไตล์ (รวมถึงธีมที่สมบูรณ์) โดยใช้ไฟล์ HTML และตัวอย่างข้อมูล
- เป็นมิตรกับ Ruby on Rails: ต้องขอบคุณ Tailwind Gem ที่ทำให้ทุกอย่างได้รับการผสานรวมเข้ากับเลย์เอาต์และไปป์ไลน์ของสินทรัพย์
สรุป
ดังที่เราได้เห็นแล้วว่าแนวทางที่เน้นยูทิลิตี้เป็นหลักของ Tailwind เหมาะอย่างยิ่งสำหรับ Ruby on Rails เราไม่จำเป็นต้องเสียเวลาในการปรับ Tailwind ให้เหมาะกับความต้องการของเราด้วยการเพิ่มการกำหนดค่าที่กำหนดเองที่ซับซ้อนหรือ CSS ที่กำหนดเองเพิ่มเติม เมื่อเราเข้าใจมุมมองและบางส่วน เราสามารถใช้คลาสยูทิลิตี้ Tailwind เพื่อกำหนดรูปร่างและจัดสไตล์ได้
หากต้องการเรียนรู้เพิ่มเติม คุณจะเข้าถึงเทมเพลตและองค์ประกอบที่พร้อมใช้งานมากมายได้จากชุมชนที่มีชีวิตชีวาของ Tailwind และผลิตภัณฑ์ต่างๆ เช่น TailwindUI (จากผู้สร้างของ Tailwind)
ขอให้สนุกกับการเขียนโค้ด!
ปล. หากคุณต้องการอ่านโพสต์ Ruby Magic ทันทีที่เผยแพร่ สมัครรับจดหมายข่าว Ruby Magic ของเราและไม่พลาดแม้แต่โพสต์เดียว! 
โธมัส ริบูเลต์
Thomas ผู้เขียนรับเชิญของเราเป็นที่ปรึกษาแบ็กเอนด์และวิศวกรโครงสร้างพื้นฐานคลาวด์ในฝรั่งเศส เป็นเวลากว่า 13 ปีที่เขาทำงานร่วมกับสตาร์ทอัพและบริษัทต่างๆ เพื่อขยายขนาดทีม ผลิตภัณฑ์ และโครงสร้างพื้นฐาน นอกจากนี้ เขายังได้รับการตีพิมพ์หลายครั้งในนิตยสาร GNU/Linux ของฝรั่งเศส และในบล็อกของเขา
บทความทั้งหมดโดย โทมัส ริบูเลต์
