☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย https://www.youtube.com/channel/UC3YgTINPYQmUcRt5ZcNFIZQ/join สวัสดีสู่ตอนที่ 6 ของซีรีย์ Vue Firebase masterclass ตอนนี้เราจะพาแนะนำ Tailwind และ DaisyUI กันว่ามันคืออะไร มันช่วยอำนวยความสะดวกอะไรได้บ้าง และทำไมผมถึงหยิบ technology 2 ตัวนี้มาใช้ใน project นี้ พร้อมกับเราจะนำ tailwind และ daisyUI มาแต่ง style ใน Todo list ให้สวยงามกัน ** สำหรับใครที่มาดู Session นี้เลยและอยากได้ code ส่วน Todo list ให้สร้าง project ใหม่และดู code Todo List ตามเอกสารนี้ได้นะครับ https://docs.mikelopster.dev/c/vue-firebase/chapter-5/workshop หัวข้อ 00:00 แนะนำ Session 00:31 แนะนำ Tailwind ว่าคืออะไร 08:04 ลง Tailwind ใน project Todo List 11:40 แนะนำ Tailwind core concept (utility class) 13:00 Tailwind - 1. Layout 18:04 Tailwind - 2. Flexbox & Grid 20:29 Tailwind - 3. Spacing 22:55 Taliwind - 4. Sizing 23:46 Tailwind - 5. Typography 26:12 Tailwind - 6. Background 27:18 Tailwind - 7. Borders 28:29 Tailwind - 8. Effect 29:14 Tailwind - 9. Filters 30:11 Tailwind - 10. Table 30:48 Tailwind - 11. Transform and Transition 31:13 Tailwind - Handling Hover, Focus, State 31:50 Tailwind - 12. Responsive 33:44 การ Customize Tailwind และ Directive (group class) 37:40 แนะนำ Daisy UI (Tailwind plugin) 39:21 ลง DaisyUI ใน project Todo List 40:26 DaisyUI Component - 1. Action 42:14 DaisyUI Component - 2. Data display 43:45 DaisyUI Component - 3. Data input 45:08 DaisyUI Component - 4. Layout 46:06 DaisyUI Component - 5. Navigation 47:30 แนะนำ Theme ใน DaisyUI 49:11 เริ่มแต่ง Todo List overview ว่าจะทำอะไรบ้าง 49:28 แก้ Layout ใหญ่ที่ App.vue 51:30 แต่ง HomeView - ตา��� checklist / เริ่มเรียง input ก่อน 53:11 แต่ง HomeView - แต่ง list view ของ todo ใหม่ 57:25 แต่ง HomeView - เพิ่ม checkbox และ status 'Done' style 1:01:42 แต่ง HomeView - เพิ่ม Loading component 1:06:05 แต่ง HomeView - เพิ่ม tab สำหรับแยก status และ computed แยก status 1:11:43 แต่ง EditView - adjust style หน้า input 1:15:20 แต่ง EditView - เพิ่ม back button 1:16:45 แต่ง EditView - เพิ่ม Loading 1:17:10 แต่ง EditView - เพิ่ม Toast (สำหรับบอกว่า update เรียบร้อยแล้ว) 1:19:17 Recap เราทำอะไรกันไปบ้าง 1:20:17 เราจะทำอะไรกันต่อใน 2 Session ต่อไป สำหรับใครอยาก follow ตามเอกสาร สามารถเข้ามาอ่านกันได้เล้ยที่นี่ https://docs.mikelopster.dev/c/vue-firebase/chapter-6/intro ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่ Facebook page: https://www.facebook.com/mikelopster.dev Website: https://mikelopster.dev พิกัดของด้านหลัง : https://shope.ee/8A54c8cfkf