Tailwind CSS Framework: Intermediate

หนังสือเล่มนี้ได้รับการรังสรรค์ขึ้นเพื่อมอบความรู้และทักษะขั้นกลางแก่ผู้ที่หลงใหลในการสร้างสรรค์งานออกแบบเว็บด้วย Tailwind CSS โดยเฉพาะอย่างยิ่งสำหรับนักพัฒนาที่ต้องการยกระดับความสามารถในการใช้เฟรมเวิร์กอันทันสมัยนี้ให้ลึกซึ้งยิ่งขึ้น หนังสือเล่มนี้นำเสนอเนื้อหาที่ละเอียดและครอบคลุม ตั้งแต่หลักการออกแบบ Responsive Design ในแนวคิด Mobile First ที่ช่วยให้เว็บไซต์ตอบสนองได้อย่างสมบูรณ์แบบในทุกอุปกรณ์ ไปจนถึงการสร้างประสบการณ์ผู้ใช้ที่ทรงพลังด้วย Hover, Focus และ Pseudo States ที่ทำให้ UI โต้ตอบได้อย่างมีชีวิตชีวาและน่าประทับใจ
นอกจากนี้ยังเน้นการออกแบบ Typography ขั้นกลางซึ่งเป็นหัวใจสำคัญของการสื่อสารข้อมูลที่ชัดเจนและงดงาม ผ่านการจัดการขนาด น้ำหนัก ระยะห่างของตัวอักษรและบรรทัดอย่างมีศิลปะ พร้อมการประยุกต์ใช้ plugin @tailwindcss/typography เพื่อยกระดับการจัดรูปแบบบทความให้ดูโดดเด่นและเป็นมืออาชีพ
ในด้านสีและธีม หนังสือเล่มนี้ชี้ให้เห็นถึงความสำคัญของการเลือกใช้สีอย่างมีศาสตร์และศิลป์ ทั้งการใช้สีมาตรฐานและการสร้างสีเฉพาะตัว (Custom Colors) ผ่านการกำหนดใน tailwind.config.js รวมถึงการจัดการ opacity และ state-based color ที่ช่วยให้ธีมของเว็บไซต์สะท้อนตัวตนและเอกลักษณ์ของแบรนด์อย่างครบถ้วนและทรงพลัง
บทสุดท้ายที่ทรงคุณค่าอย่างยิ่ง คือ การใช้งาน Plugins ที่ช่วยขยายศักยภาพของ Tailwind CSS ให้เหนือกว่าขีดจำกัดเดิม ไม่ว่าจะเป็นการใช้ plugin ยอดนิยม เช่น @tailwindcss/forms, aspect-ratio และ line-clamp รวมทั้งการสร้าง plugin เองเบื้องต้นและการ extend components และ utilities ที่ช่วยให้สามารถออกแบบระบบ UI ที่มีความเป็นเอกภาพและตอบโจทย์เฉพาะทางได้อย่างลึกซึ้ง
ด้วยเนื้อหาที่ถูกออกแบบมาอย่างพิถีพิถันและตัวอย่างที่ใช้งานได้จริง หนังสือเล่มนี้จึงเปรียบเสมือนพจนานุกรมและคู่มือที่ครบครันสำหรับนักพัฒนาระดับกลางที่ต้องการนำ Tailwind CSS ไปใช้สร้างสรรค์ผลงานที่โดดเด่น มีประสิทธิภาพ และยั่งยืน
สารบัญ
บทที่ 6 Responsive Design (Responsive Design) 1
Responsive Design ใน Tailwind CSS
Responsive Design (รายละเอียดเชิงลึก)
แนวคิด Mobile First Design (ใน Tailwind CSS)
การใช้งาน Responsive Class ใน Tailwind CSS
ตัวอย่าง Responsive Navbar และ Card Grid ด้วย Tailwind CSS
บทที่ 7 Hover, Focus, Pseudo States (Hover, Focus, Pseudo States) 59
Hover, Focus, Pseudo States
Hover, Focus, Pseudo States รายละเอียดเชิงลึก
การใช้ hover:, focus:, active:, disabled: ใน Tailwind CSS
การทำ Interactive UI ด้วย Tailwind CSS
การใช้ group และ group-hover ใน Tailwind CSS
การใช้ peer และ peer-* ใน Tailwind CSS
บทที่ 8 Typography ขั้นกลาง (Intermediate Typography) 126
Typography
Typography ขั้นกลาง ของ Tailwind CSS
ขนาดตัวอักษรใน Tailwind CSS
น้ำหนักตัวอักษร (Font Weight) ใน Tailwind CSS
Line height (ระยะห่างบรรทัด) ด้วย leading-*
Letter Spacing ด้วย tracking-*
การใช้ plugin @tailwindcss/typography
ตัวอย่างบูรณาการ
บทที่ 9 การจัดการสีและ Theme (Color and Theme) 194
การจัดการสีและ Theme ใน Tailwind CSS
รายละเอียดเชิงลึกของการจัดการสีและ Theme ใน Tailwind CSS
การใช้สีใน Tailwind CSS
การสร้าง Custom Colors ใน Tailwind CSS
การใช้ Opacity ใน Tailwind CSS
สีแบบ State ใน Tailwind CSS
การปรับ Tone สีตาม Brand Design ใน Tailwind CSS
ตัวอย่างบูรณาการ
บทที่ 10 การใช้ Plugins (Plugins) 249
การใช้ Plugins
การใช้ Plugins ใน Tailwind CSS (เชิงลึก)
รายละเอียดเชิงลึกของ Plugin ยอดนิยมใน Tailwind CSS 3 ตัวหลัก ที่ควรรู้จัก
การติดตั้งและใช้งาน Plugin ใน Tailwind CSS
การสร้าง Tailwind CSS Plugin เองเบื้องต้น (Custom Plugin)
การ Extend Components และ Utilities ใน Tailwind CSS
ตัวอย่างบูรณาการ
บรรณานุกรม 294