รวม Tailwind CSS เข้าโปรเจกต์ Ruby on Rails ได้อย่างง่ายดาย

ยากที่จะ overstate ความสำคัญของ Cascading Style Sheets (CSS) สำหรับเว็บไซต์ทุกแห่ง ตั้งแต่ CSS standards แรกเผยแพร่ในปลายปี 1996 เราได้ก้าวหน้ามาค่อนข้างไกลเกี่ยวกับ features และ ecosystems

Frameworks หลายตัวได้ปรากฏและพิสูจน์ได้รับความนิยม หนึ่งในล่าสุดคือ Tailwind CSS

ในโพสต์นี้ เราจะตรวจสอบ utility-first approach ของ Tailwind ก่อน แล้วค่อยดำน้ำเข้าไปในวิธีใช้มันในแอปพลิเคชัน Ruby on Rails คุณจะเห็นว่า Tailwind ช่วยให้คุณสร้างเว็บไซต์ที่ยอดเยี่ยมโดยไม่ต้องการ custom CSS และ long debugging sessions

มาเริ่มกัน!

Tailwind CSS: Utility-First Approach

CSS frameworks ส่วนใหญ่ (Foundation, Bootstrap, หรือ Bulma ตัวอย่างเช่น) ให้ ready-to-use components อย่างปุ่มและ form fields ทำให้คุณประกอบบล็อคได้อย่างรวดเร็วเพื่อขึ้นรูป interface

โดยปกติ การเพิ่มปุ่มกับ Bootstrap เป็นอย่างนี้:

ในตัวอย่างนี้ ปุ่มง่ายๆ ถูกกำหนดและ styled โดยการ apply classes btn และ btn-primary btn-primary ตั้งค่าสีที่ถูกต้องสำหรับ use case ของเรา อย่างไรก็ตาม interface นั้นไม่พอดีกับความต้องการของเรา ดังนั้นเราเพิ่ม custom CSS stylesheet เพื่อปรับแต่งทุก component:

Tailwind เป็นแนวคิด "utility-first" แทนที่จะให้ ready-to-use components อย่างปุ่ม มันมี low-level utility classes ที่คุณสามารถ compose เพื่อสร้าง custom designs ได้ ดังนั้นมันส่งเสริม functional approach มากขึ้นสำหรับ styling โดยที่คุณ apply pre-defined classes โดยตรงใน HTML มันมุ่งลดความจำเป็นใน custom CSS และส่งเสริม design consistency ผ่าน constraints ของ utility classes

"Utility-first" หมายความว่า Tailwind ให้ atomic, single-purpose classes ที่คุณสามารถรวมกันเพื่อสร้าง complex designs

มา看看โค้ดบ้างเพื่อเปรียบเทียบ Tailwind และ Bootstrap ก่อนอื่น นี่คือวิธีที่ Tailwind ให้เรา style ปุ่มง่ายๆ:

มีชุดของ button element classes เพื่อกำหนดค่า:

• Background color bg-blue-500: ในขณะที่ 'blue' เป็นสีที่เลือกไว้ล่วงหน้า เราสามารถตั้งค่า color shade ด้วยตัวเลข ตัวเลขยิ่งสูง สียิ่งมืด
• Background color on hover: hover:bg-blue-600
• Text color text-white: ไม่ต้องการตัวเลขที่นี่ เพราะมันสีขาว มี default shade เสมอหากคุณไม่ระบุตัวเลข เช่นกับ text-red
• Vertical padding py-2: 'p' คือ padding, 'y' สำหรับ vertical axis, '2' คือ spacing value ไม่ใช่ใน pixels แต่เป็น scale ที่กำหนดใน Tailwind
• Horizontal padding px-4: เหมือนด้านบน กับ 'x' สำหรับ horizontal axis
• Rounding corners: rounded

สิ่งนี้ดู verbose กว่าตัวอย่าง Bootstrap แต่โดยการเพิ่ม classes เฉพาะ เราสามารถปรับแต่งแต่ละส่วนของ style ได้ เราไม่ต้องสร้าง custom CSS class

คุณอาจไม่พอใจกับสีเหล่านี้ แต่ข่าวดีคือคุณสามารถเพิ่ม custom colors เราจะครอบคลุมภายหลัง

คำพูดเกี่ยวกับ Scales

CSS ทรงพลังเมื่อพูดถึง spacing (เช่น margins และ padding) และคุณสามารถทำงานกับ pixels และ rems (root-em ขนาด relative ต่อขนาดของ root element) นี้มีแนวโน้มที่จะยาก อย่างไรก็ตาม Tailwind มาพร้อม spacing scale ของตัวเองที่ซ่อน complexity ขณะที่ช่วยเรื่อง proportionality

โดย default Tailwind เสนอค่าระหว่าง 0 และ 96 โดยแต่ละ step proportional กับอีกตัวหนึ่ง ตัวอย่างเช่น ค่า 16 มี spacing มากกว่า 8 สองเท่า ขอบคุณสิ่งนี้ เราไม่ต้องทำคณิตศาสตร์เพื่อทำงานกับ rems หรือ pixels เราสามารถกำหนดค่าที่เราชอบและ reuse พวกมันทั่ว design ของเรา

อ่านเพิ่มเติมเกี่ยวกับ spacing ในเอกสารของ Tailwind CSS

การตั้งค่า Tailwind ในสภาพแวดล้อม Ruby on Rails

Ruby on Rails 7.x รองรับ Tailwind โดยตรงใน application generator

เราจะข้าม test configuration (-T) เพื่อหลีกเลี่ยงการเพิ่มความซับซ้อนที่ไม่จำเป็นในบทความนี้

Tailwind มี neat feature ที่ generate CSS file ที่แอปพลิเคชันของคุณต้องการ Frameworks อื่นๆ ต้องการให้คุณ include whole CSS file ที่กำหนด framework (แม้ pieces ที่คุณไม่ใช้) ในทางตรงข้าม Tailwind จะ scan โปรเจกต์ของคุณและ generate CSS file ที่มีเฉพาะ classes ที่โปรเจกต์ของคุณต้องการ

คุณต้องรัน utility เล็กน้อยเพื่อให้สิ่งนั้นเกิดขึ้น ใน development mode คุณสามารถรัน watcher daemon ที่จะเก็บสิ่งต่างๆ ให้ up to date ขณะที่คุณทำงาน: bin/rails tailwindcss:watch

คุณยังสามารถเพิ่ม watcher daemon ไปที่ Procfile แล้วใช้ foreman หรือ overmind เพื่อเริ่ม web และ css processes:

มาใช้มันภายใน landing page เรียบง่าย:

เราสามารถไปที่ https://localhost:3000/landing/index

การวิเคราะห์ Landing Page ของเรา

ทุก landing page ต้องการ title Generator ทำงานเพราะเรากำหนดแอปพลิเคชันให้ใช้ Tailwind เป็น CSS framework

เราพบสิ่งที่ดูเหมือน standard HTML ที่นี่ เรามีเพียงสอง classes สำหรับ h1 tag:

• font-bold: เพื่อควบคุม font weight
• text-4xl: เพื่อควบคุม font size

หากเราเปลี่ยน text-4xl เป็น text-xl และ reload หน้า new style จะถูก apply โดยอัตโนมัติ การดูที่เทอร์มินัลที่ Foreman กำลังรัน คุณจะเห็นว่า Tailwind ได้ generate stylesheet ในพื้นหลังอีกครั้ง นั่นคือวิธีที่ง่ายดายที่สุดในการรวม Tailwind เข้าแอปพลิเคชัน Ruby on Rails (นี่พึ่งพา tailwindcss-rails gem)

การกำหนดค่า Tailwind สำหรับ Ruby on Rails

คุณสามารถแก้ไขไฟล์ config/tailwind.config.js เพื่อปรับตั้งค่า Tailwind (เช่น เพิ่ม additional colors, ระบุ font ที่จะใช้, ปรับ spacing ฯลฯ)

ตัวอย่างเช่น เราสามารถเพิ่มสี "copper" ให้ backgrounds และ text:

โปรดสังเกตว่า shades มีประโยชน์แต่สามารถตั้งชื่อแทนได้ หากเราต้องการแค่สาม shades ตัวอย่างเช่น เราสามารถใช้ 'light', 'medium', และ 'dark' แทนตัวเลขใน views ของเรา

เราสามารถใช้ shades ใน title ของเรา:

คุณสามารถหารายละเอียดเกี่ยวกับสิ่งนี้ใน README ของ tailwindcss-rails gem และเอกสาร Tailwind CSS ด้วย

Asset Pipeline

เราเห็นว่า bin/rails tailwindcss:watch เก็บ stylesheets ของเรา up to date ใน local development mode หากเราต้องการ build stylesheets เพียงครั้งเดียว เราสามารถใช้ bin/rails tailwindcss:build แทน

สำหรับ production use คุณสามารถพึ่งพา bin/rails assets:precompile เพื่อเรียก bin/rails tailwindcss:build โดยตรง

เรียนรู้เพิ่มเติมเกี่ยวกับ asset pipeline สำหรับแอปพลิเคชัน Ruby on Rails

Tailwind for Rails ในการกระทำ

มาเช็กเอาต์ practical uses คู่ของ Tailwind ในบาง views: form และ responsive navigation bar

A Simple Form (ฟอร์มง่ายๆ)

โดยใช้ Ruby on Rails generator เราสร้าง user resource:

เราสามารถแก้ไขไฟล์ users_controller.rb และสร้าง view สำหรับ form

เรา style แต่ละชิ้นแยกกัน ปรับ text color, background color, borders, padding, margins ฯลฯ ไม่มีอะไรเกิน standard Tailwind ที่นี่ แต่มันปรับแต่ง form ให้เข้ากับความต้องการของเรา

A Responsive Navigation Bar (Navigation Bar ที่ Responsive)

เราสามารถเพิ่ม conditional breakpoints ตาม minimum width ของเบราว์เซอร์โดยใช้ utility class ใดๆ ใน Tailwind ตัวอย่างเช่น title ต่อไปนี้จะเปลี่ยนสีขึ้นอยู่กับขนาดหน้าต่าง:

โดย default สีคือ dark shade ของ gray เมื่อ browser window width อยู่ระหว่าง 640px และ 1024px มันเป็น shade ของ teal หาก window width อยู่เหนือ 1024px มันเป็น shade ของ purple

เนื่องจาก Tailwind ยังจัดการ columns ได้ นี่คือตัวอย่างเพื่อ showcase ว่า column width ของ element สามารถเปลี่ยนได้ตาม window size:

Label "State" ครอบคลุมสองหรือสาม columns ในกรณีนี้

ที่นี่ โดยใช้ grid layout utilities ของ Tailwind เรากำหนด grid ที่:

• One column wide โดย default (grid-cols-1)
• Six columns wide เหนือ 640px width
• Eight columns wide เหนือ 768px width

Breakpoints และ widths ของพวกมัน:

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

ตามที่เราเห็น Tailwind ทำให้ page design และการ styling components เรียบง่าย

Tailwind vs. Other Frameworks

ตอนนี้ที่เราเข้าใจว่า Tailwind สามารถใช้ได้อย่างไร มาทบทวน key differences ไปกับ frameworks อื่นๆ:

• Utility-based: เรา compose style ของแต่ละ element โดยใช้ specific CSS classes แต่ละตัวโฟกัสที่ส่วนต่างๆ ของ style
• Get what we need: เราได้แค่ parts ที่เราต้องการ ship website ทำให้ load times เร็วขึ้น ที่ optimize build time
• Extensible: เราสามารถ extend หรือ customize TailwindCSS defaults ผ่าน configuration file เรียบง่าย
• Easy shading of colors: ไม่ต้องคิดวิธีทำ lighter หรือ darker shades ของสีเพื่อจัดการ hover situations ตัวอย่างเช่น
• Simple spacing: Hidden และ proportional scales ทำให้ spacing เรียบง่าย
• Less custom CSS: เนื่องจากเราแค่ assemble classes เพื่อ style elements เราพึ่งพา custom CSS น้อยลง และสามารถ share styles (รวมถึง complete themes) โดยใช้ HTML files และ snippets
• Ruby on Rails friendly: ขอบคุณ Tailwind gem ทุกอย่าง integrated เข้าไปใน layouts และ assets pipeline

สรุป

ตามที่เราเห็น Tailwind's utility-first approach เป็น great fit สำหรับ Ruby on Rails เราไม่ต้องใช้เวลาปรับ Tailwind ให้เข้ากับความต้องการของเราโดยการเพิ่ม complex custom configurations หรือ additional custom CSS 当我们 conceive views และ partials ของเรา เราสามารถใช้ Tailwind utility classes เพื่อขึ้นรูปและ style พวกมัน

หากคุณอยากเรียนรู้เพิ่มเติม คุณสามารถเข้าถึง ready-to-use templates และ components มากมายขอบคุณ vibrant community ของ Tailwind และ products อย่าง TailwindUI (จากผู้สร้าง Tailwind)

Happy coding!

P.S. หากคุณอยากอ่าน Ruby Magic posts ทันทีที่พวกเขาออก ให้ subscribe Ruby Magic newsletter ของเรา และไม่เคยพลาดโพสต์เดี่ยว!

Thomas Riboulet

ผู้เขียนรับเชิญ Thomas เป็น Consultant Backend และ Cloud Infrastructure Engineer ที่ตั้งอยู่ใน France มากกว่า 13 ปี เขาทำงานกับ startups และบริษัทเพื่อ scale teams, products และ infrastructure ของพวกเขา เขายังเผยแพร่หลายครั้งในนิตยสาร GNU/Linux ของ France และบน blog ของเขา

บทความทั้งหมดโดย Thomas Riboulet