Tailwind CSS Framework สวยโดนใจ น่าใช้

&NewLine;<p class&equals;"wp-block-paragraph">ปฏิเสธไม่ได้ว่า CSS Framework ที่สวยโดนใจ ใช้งานง่าย มี Learning Curve ระยะเวลาในการเรียนรู้ไม่นาน มีการพัฒนาอย่างต่อเนื่อง ตามยุคสมัย และได้รับความนิยมมากที่สุดในช่วงหลายปีที่ผ่านมา คือ Bootstrap Framework<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">แต่จริง ๆ แล้วในโลกของ CSS ยังมีเฟรมเวิร์คอยู่อีกมากมายที่ถูกคิดค้น พัฒนาขึ้นมา เพื่อให้ตอบโจทย์นักพัฒนามากที่สุด และอีกหนึ่ง Framework ที่กำลังได้รับความนิยมมากขึ้นเรื่อย ๆ นั้นคือ <a href&equals;"https&colon;&sol;&sol;tailwindcss&period;com" target&equals;"&lowbar;blank" rel&equals;"noreferrer noopener nofollow">Tailwind Framework<&sol;a><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;20px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<h4 class&equals;"wp-block-heading">ภาพตัวอย่าง Tailwind UI<&sol;h4>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2021&sol;02&sol;tailwindui&lowbar;ตัวอย่าง&period;jpg"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2021&sol;02&sol;tailwindui&lowbar;ตัวอย่าง-940x464&period;jpg" alt&equals;"tailwind ui ตัวอย่าง" class&equals;"wp-image-5900" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2021&sol;02&sol;tailwindui&lowbar;ตัวอย่าง&period;jpg" data-full-size&equals;"1150x568" &sol;><&sol;a><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<h4 class&equals;"wp-block-heading">Tailwind แตกต่างจาก Framework อื่นอย่างไร &quest;<&sol;h4>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ถ้าเราเข้าไปที่เว็บไซต์ทางการของ Tailwind สิ่งที่ผู้พัฒนาพยายามจะบอกเราคือ Tailwind เป็น Framework แบบ A utility-first ความหมายคือเป็นเฟรมเวิร์คที่มี class สำเร็จรูปอรรถประโยชน์ให้เราใช้งานได้ทันที เมื่อไหร่ที่เราต้องการเปลี่ยน UI หลักของเฟรมเวิร์ค สี ขนาด การจัดวาง ต่าง ๆ นา ๆ เราแทบไม่ต้องแตะไฟล์ CSS หลักเลย ซึ่งแตกต่างจาก Bootstrap Framework ที่จะเป็นแบบ Extracting Component Classes คือการแยกคลาสที่ไม่จำเป็นออกจาก component หลักของเฟรมเวิร์ค เพื่อให้เห็นภาพชัดเจน ตัวอย่างการสร้างปุ่มระหว่าง 2 เฟรมเวิร์คด้านล่าง<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">สร้างปุ่มแบบ Tailwind<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code lang&equals;"markup" class&equals;"language-markup">&lt&semi;button class&equals;"bg-blue-500 hover&colon;bg-blue-700 text-white font-bold py-2 px-4 rounded"&gt&semi;&NewLine; Button&NewLine;&lt&semi;&sol;button&gt&semi;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">สร้างปุ่มแบบ Bootstrap<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code lang&equals;"markup" class&equals;"language-markup">&lt&semi;button class&equals;"btn btn-blue"&gt&semi;&NewLine; Button&NewLine;&lt&semi;&sol;button&gt&semi;&NewLine;&NewLine;&lt&semi;style&gt&semi;&NewLine; &period;btn &lbrace;&NewLine; font-weight&colon;700&semi;&NewLine; padding&colon;2px 4px 2px 4px&semi;&NewLine; &rcub;&NewLine; &period;btn-blue &lbrace;&NewLine; color&colon;white&semi;&NewLine; background-color&colon;rgba&lpar;0&comma; 0&comma; 255&comma; 0&period;5&rpar;&semi;&NewLine; &rcub;&NewLine; &period;btn-blue&colon;hover &lbrace;&NewLine; background-color&colon;blue&semi;&NewLine; &rcub;&NewLine;&lt&semi;&sol;style&gt&semi;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">จากการสร้างปุ่มระหว่าง 2 เฟรมเวิร์คนั้น มีข้อแตกต่างกัน ฝั่ง Tailwind จะเน้นให้ class ที่สำเร็จมาให้เราใช้งาน ส่วนฝั่ง bootstrap คือถ้าต้องการเปลี่ยนแปลงอะไร ก็แค่สร้าง class ใหม่ขึ้นมากำกับ<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<div style&equals;"height&colon;20px" aria-hidden&equals;"true" class&equals;"wp-block-spacer"><&sol;div>&NewLine;&NewLine;&NewLine;&NewLine;<h4 class&equals;"wp-block-heading">แนวคิดการใช้ CSS แบบ Tailwind A utility-first ดีอย่างไร &quest;<&sol;h4>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">อ่านมาถึงตรงนี้ทุกคนคงจะคิดว่า แบบเดิม หรือการเขียนแบบ Bootstrap Extracting Component Classes &lpar; แยกคลาสที่ไม่จำเป็นออกจากคลาสหลักของเฟรมเวิร์ค &rpar; น่าจะเวิร์คกว่าใช่ไหมครับ เขียนง่าย ๆ และคลาสไม่ต้องเยอะมาก ถ้าต้องการปรับส่วนไหนก็เขียน Custom CSS ขึ้นมาเสริมเองได้<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ข้อดีของการเขียนแบบ A utility-first ก็คือตรงกันข้ามกับการเขียนแบบ Extracting Component Classes ครับ ให้นึกภาพว่า ในกรณีที่เราใช้ button component ของเฟรมเวิร์ค แต่เผอิญว่า ในแต่ละหน้าของเว็บไซต์เรามีขนาดของปุ่มที่แตกต่างกัน 2 &&num;8211&semi; 3 พิกเซล หรืออาจจะมากกว่านั้น <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">สำหรับ Bootstrap เราอาจจะต้องเขียนคลาสใน Custom CSS เพื่อกำหนดขนาดให้ปุ่มที่แตกต่างกันในแต่ละหน้า <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">แต่สำหรับ Tailwind A utility-first เราสามารถใช้งานคลาสได้ทันที โดยไม่ต้องเขียนคลาสขึ้นมาใหม่<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ตัวอย่างเช่น ถ้าเราต้องการปุ่มที่มีความกว้าง 15px padding 2px margin 2px พื้นหลังสีแดงระดับความเข็มของสี 700 และมีค่าความโปรงของพื้นหลัง 50&percnt; จะเขียนคำสั่งได้ดังนี้<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code lang&equals;"markup" class&equals;"language-markup">&lt&semi;button class&equals;"h-15 p-2 m-2 bg-red-700 bg-opacity-50"&gt&semi;Danger&lt&semi;&sol;button&gt&semi;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">มาถึงตรงนี้คงจะพอมองภาพออกแล้วใช่ไหมครับว่า ข้อดีของ Tailwind และการใช้งาน CSS แบบ A utility-first ก็น่าสนใจไม่น้อยเหมือนกัน <&sol;p>&NewLine;