ทำไมเราควรใช้ Tailwind CSS ? รู้จักกับเครื่องมือที่จะช่วยให้เว็บไซต์ของคุณเร็วกว่าที่เคย!

Tailwind CSS คืออะไร?

‍

Tailwind CSS เป็นเฟรมเวิร์ก CSS (Cascading Style Sheets) ที่มุ่งเน้นการใช้งานเป็นหลัก (utility-first) พร้อมด้วยคลาสที่กำหนดไว้ล่วงหน้าซึ่งสามารถใช้ในการสร้างและออกแบบหน้าเว็บได้โดยตรงในโค้ด ช่วยให้สามารถเขียน CSS ใน HTML ในรูปแบบของคลาสที่กำหนดไว้ล่วงหน้า

‍

เราจะนิยามว่าเฟรมเวิร์กคืออะไร และเราหมายถึงอะไรเมื่อพูดถึง ‘CSS ที่มุ่งเน้นการใช้งานเป็นหลัก’ (utility-first CSS) เพื่อช่วยให้เข้าใจมากขึ้นเกี่ยวกับเครื่องมือ Tailwind CSS 

‍

Framework (เฟรมเวิร์ก) คืออะไร?

‍

ในภาษาการเขียนโปรแกรมโดยทั่วไป Framework คือเครื่องมือที่ให้ Componnt ที่สามารถนำกลับมาใช้ใหม่และได้รับการสร้างขึ้นเรียบร้อยแล้วจากคุณสมบัติของเครื่องมือที่มีอยู่แล้ว วัตถุประสงค์โดยรวมของการสร้างเฟรมเวิร์กคือเพื่อเพิ่มความเร็วในการพัฒนาโดยลดการทำงานให้น้อยลง

‍

ตอนนี้เราได้ทราบความหมายของเฟรมเวิร์กที่จะช่วยให้เข้าใจว่า Tailwind CSS เป็นเครื่องมือที่สร้างขึ้นบนคุณสมบัติของ CSS ฟังก์ชันการทำงานทั้งหมดของเฟรมเวิร์กนี้ได้รับการพัฒนามาจากสไตล์ CSS ที่ถูกจัดเรียงเป็นคลาส

‍

CSS Framework ที่มุ่งเน้นการใช้งานเป็นหลัก (Utility-First CSS Framework) คืออะไร?

‍

เมื่อเราพูดถึง CSS ที่มุ่งเน้นการใช้งานเป็นหลัก (utility-first CSS) เราหมายถึงคลาสในโค้ดของเรา (HTML) ที่มีฟังก์ชันที่กำหนดไว้ล่วงหน้า นั่นหมายความว่าเพียงแค่ต้องเขียนคลาสที่มีสไตล์ที่แนบมาด้วยกัน และสไตล์เหล่านั้นจะถูกนำไปใช้กับองค์ประกอบนั้น

‍

ในกรณีที่คุณกำลังทำงานกับ Vanilla CSS (CSS ที่ไม่ใช้เฟรมเวิร์กหรือไลบรารีใดๆ) คุณจะต้องกำหนดชื่อคลาสให้กับองค์ประกอบก่อน จากนั้นแนบคุณสมบัติและค่าต่างๆ กับคลาสนั้น ซึ่งจะนำไปสู่การใช้สไตล์กับองค์ประกอบนั้น

‍

เพื่อให้เห็นภาพการทำงานมากขึ้น เราจะยกตัวอย่างโดยจะสร้างปุ่มที่มีมุมโค้งและมีข้อความว่า “Click Me” 

‍

และนี่คือลักษณะของปุ่มที่จะได้

‍

‍

โดยเราจะทำสิ่งนี้โดยใช้ Vanilla CSS ก่อน แล้วจากนั้นจะใช้คลาสยูทิลิตี้ที่มีให้ใน Tailwind CSS

‍

สร้างโดย Vanilla CSS

‍

<button class="btn">Click me</button>

‍

เราได้กำหนดคลาส btn ให้กับแท็กปุ่ม ซึ่งจะถูกตกแต่งด้วยสไตล์ชีตภายนอก นั่นคือ

‍

.btn {

  background-color: #

‍

000;

  color: #fff;

  padding: 8px;

  border: none;

  border-radius: 4px;

}

‍

สร้างโดย Tailwind CSS

‍

<button class="bg-black text-white p-2 rounded">Click me</button>

‍

และนี่คือทั้งหมดที่จำเป็นสำหรับการใช้ Tailwind CSS เพื่อให้ได้ผลลัพธ์เดียวกันกับตัวอย่างที่ใช้ Vanilla CSS ไม่ต้องสร้างสไตล์ชีตภายนอกที่คุณต้องเขียนสไตล์เอง เพราะชื่อคลาสที่ใช้นั้นมีสไตล์ที่กำหนดไว้ล่วงหน้าแล้ว

‍

ข้อกำหนดพื้นฐานสำหรับการใช้งาน Tailwind CSS

‍

ก่อนที่จะใช้งาน Tailwind CSS มีข้อกำหนดพื้นฐานบางประการที่ควรพิจารณาให้ตรงกับเงื่อนไข เพื่อให้สามารถใช้คุณสมบัติของเฟรมเวิร์กได้อย่างไม่มีปัญหา ตัวอย่างของข้อกำหนดมีต่อไปนี้

‍

• มีความรู้ที่ดีเกี่ยวกับ HTML ทั้งในเรื่องของโครงสร้าง และวิธีการทำงาน
• พื้นฐานความรู้ที่มั่นคงใน CSS — media queries flexbox และระบบ grid

‍

สามารถใช้ Tailwind CSS ได้ที่ไหนบ้าง?

‍

คุณสามารถใช้ Tailwind CSS ในโปรเจกต์ Front-end รวมถึงเฟรมเวิร์ก JavaScript เช่น Reactjs Nextjs Laravel Vite Gatsby และอื่น ๆ 

‍

ข้อดีและข้อเสียของการใช้ Tailwind CSS

‍

ตัวอย่างข้อดีในการใช้งาน Tailwind CSS

‍

• กระบวนการพัฒนาเร็วขึ้น
• ช่วยให้คุณฝึกฝน CSS ของคุณได้มากขึ้นเนื่องจากยูทิลิตี้มีความคล้ายคลึงกัน
• ยูทิลิตี้และคอมโพเนนต์ทั้งหมดสามารถปรับแต่งได้ง่าย
• ขนาดไฟล์มักจะมีขนาดเล็ก สำหรับไฟล์โดยรวมสำหรับการผลิต
• เรียนรู้ได้ง่ายหากคุณมีพื้นฐาน CSS อยู่แล้ว
• มีเอกสารคู่มือที่ดีสำหรับการเรียนรู้

‍

และข้อเสียบางประการของการใช้ Tailwind CSS ได้แก่

‍

• โค้ดอาจดูไม่เป็นระเบียบสำหรับโปรเจกต์ขนาดใหญ่ เนื่องจากสไตล์ทั้งหมดอยู่ในไฟล์ HTML
• การเรียนรู้ไม่ง่ายหากคุณไม่เข้าใจพื้นฐานการใช้งาน CSS 
• จำเป็นต้องสร้างทุกอย่างจากศูนย์ รวมถึงองค์ประกอบข้อมูลที่ป้อนเข้าไป และเมื่อติดตั้ง Tailwind CSS จะลบสไตล์ CSS ที่ตั้งไว้เริ่มต้นทั้งหมด
• Tailwind CSS อาจไม่ใช่ตัวเลือกที่ดีที่สุด หากคุณต้องการลดเวลาที่ใช้ในการพัฒนาส่วนหน้าเว็บไซต์ (Front-end) และมุ่งเน้นไปที่ตรรกะด้านหลังเว็บไซต์ (Back-end) เป็นหลัก

‍

เมื่อไหร่ที่ควรใช้ Tailwind CSS?

‍

Tailwind CSS เหมาะสำหรับการเร่งกระบวนการพัฒนาโดยการเขียนโค้ดน้อยลง ที่มาพร้อมกับระบบออกแบบที่ช่วยรักษาความสอดคล้องกันตามความต้องการของการออกแบบต่างๆ เช่น การเพิ่มพื้นที่รอบข้าง (padding) การจัดวาง (spacing) และอื่นๆ ด้วยระบบนี้ จะไม่ต้องกังวลเกี่ยวกับการสร้างระบบออกแบบเอง

‍

นอกจากนี้ ยังสามารถใช้ Tailwind CSS หากกำลังมองหาเฟรมเวิร์กที่สามารถปรับแต่งได้ง่าย เนื่องจากไม่บังคับให้ใช้คอมโพเนนต์ (เช่น แถบนำทาง ปุ่ม ฟอร์ม ฯลฯ) ในรูปแบบเดียวกันตลอดเวลา แล้วยังสามารถเลือกว่าคอมโพเนนต์ควรมีลักษณะอย่างไร อย่างไรก็ตาม ไม่ควรใช้ Tailwind หากพื้นฐานความรู้และฝึกฝนการใช้ CSS ยังไม่มากพอ 

‍

ความเหมือนและความแตกต่างระหว่าง Tailwind CSS และเฟรมเวิร์ก CSS อื่นๆ

‍

บางส่วนที่ Tailwind CSS ยังคงมีความคล้ายคลึงกับ Framework CSS แบบอื่น ๆ ได้แก่ 

‍

1. ช่วยให้คุณทำงานเสร็จเร็วขึ้น
2. มาพร้อมกับคลาสที่กำหนดไว้ล่วงหน้า
3. สร้างขึ้นบนกฎของ CSS
4. ทั้งสองเรียนรู้และใช้งานได้ง่ายหากมีความรู้พื้นฐานเกี่ยวกับ CSS

‍

แต่สิ่งที่ทำให้ Tailwind CSS ต่างจาก Framework CSS อื่น ๆ ก็คือ

‍

1. Tailwind แตกต่างจากเฟรมเวิร์กส่วนใหญ่เพราะต้องสร้างคอมโพเนนต์ของคุณเอง ตัวอย่างเช่น Bootstrap มีคอมโพเนนต์เช่นแถบนำทาง ปุ่ม และอื่นๆ แต่กับ Tailwind จะต้องสร้างทุกอย่างด้วยตัวเอง
2. เฟรมเวิร์กบางตัวเช่น Bootstrap ไม่สามารถปรับแต่งได้ง่าย ทำให้คุณต้องใช้รูปแบบการออกแบบของพวกเขา ในขณะที่ Tailwind คุณสามารถควบคุมการทำงานของทุกสิ่งได้
3. การมีความรู้เชิงลึกเกี่ยวกับ CSS เป็นสิ่งจำเป็นในการใช้งาน Tailwind การเขียนชื่อคลาสเพียงอย่างเดียวไม่เพียงพอ เนื่องจากต้องรวมชื่อคลาสเหล่านั้นเหมือนกับว่ากำลังเขียน CSS แบบดั้งเดิมเพื่อให้ได้ผลลัพธ์ที่เหมือนกัน สิ่งที่ต้องรู้ในเฟรมเวิร์กอื่นๆ ส่วนใหญ่คือ คอมโพเนนต์ใดจะถูกสร้างขึ้นเมื่อใช้ชื่อคลาสนั้นๆ

‍

มาเริ่มต้นใช้งาน Tailwind CSS กัน!

‍

ก่อนที่จะติดตั้ง Tailwind CSS และผสานรวมเข้ากับโปรเจ็กต์ที่มีอยู่ โปรดตรวจสอบว่า

‍

• ติดตั้ง Node.js บนคอมพิวเตอร์เพื่อใช้งาน Node package manager (npm) ในเทอร์มินัล
• โปรเจ็กต์ได้รับการตั้งค่าเรียบร้อยพร้อมกับไฟล์ที่สร้างขึ้นแล้ว

‍

นี่คือโครงสร้างโปรเจ็กต์ในขณะนี้

‍

-Tailwind-tutorial
   -public
       -index.html
       -styles.css
   -src
       -styles.css

‍

ต่อไปนี้ ให้เปิดเทอร์มินัลสำหรับโปรเจ็กต์และรันคำสั่งต่อไปนี้

‍

npm install -D tailwindcss

‍

คำสั่งข้างต้นจะทำการติดตั้งเฟรมเวิร์ก Tailwind CSS เป็นการพึ่งพา (dependency) ต่อไป สร้างไฟล์ `tailwind.config.js` โดยรันคำสั่งด้านล่างนี้

‍

npx tailwindcss init

‍

ไฟล์ `tailwind.config.js` จะว่างเปล่าเมื่อถูกสร้างขึ้น ดังนั้นเราต้องเพิ่มบางบรรทัดของโค้ด

‍

module.exports = {

  content: ["./src/**/*.{html,js}", "./public/*.html"],

  theme: {

    extend: {},

  },

  plugins: [],

};

‍

เส้นทางไฟล์ที่ให้ไว้ในอาร์เรย์ content จะช่วยให้ Tailwindสามารถกำจัดสไตล์ที่ไม่ได้ใช้งานออกไปในระหว่างการสร้างได้

‍

ขั้นตอนต่อไปคือการเพิ่มคำสั่ง “@tailwind” ในไฟล์ CSS ที่อยู่ในโฟลเดอร์ src ซึ่งเป็นที่ที่ Tailwind สร้างสไตล์ยูทิลิตี้ที่กำหนดไว้ล่วงหน้าให้

‍

@tailwind base;

@tailwind components;

@tailwind utilities;

‍

สิ่งสุดท้ายที่ต้องทำคือเริ่มกระบวนการสร้างโดยรันคำสั่งนี้ในเทอร์มินัล

‍

npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

‍

ในโค้ดข้างต้น เรากำลังบอก Tailwind ว่าไฟล์นำเข้าของเราคือสไตล์ชีตในโฟลเดอร์ src และสไตล์ใดๆ ที่เราใช้จะต้องถูกสร้างเข้าไปในไฟล์ผลลัพธ์ในโฟลเดอร์ public คำสั่ง --watch ทำให้ Tailwind ติดตามการเปลี่ยนแปลงของไฟล์ของคุณเพื่อกระบวนการสร้างอัตโนมัติ หากไม่ใส่คำสั่งนี้ เราต้องรันสคริปต์นี้ทุกครั้งที่ต้องการสร้างโค้ดและดูผลลัพธ์ที่ต้องการ

‍

วิธีใช้งาน Tailwind CSS

‍

หลังจากที่ติดตั้งและตั้งค่า Tailwind CSS สำหรับโปรเจ็กต์ของเราแล้ว ลองมาดูตัวอย่างบางส่วนเพื่อให้เข้าใจการประยุกต์ใช้งานของมันอย่างเต็มที่

‍

ตัวอย่างการใช้ Flexbox ใน Tailwind CSS

‍

เพื่อใช้ flex ในTailwind CSS คุณจำเป็นต้องเพิ่มคลาส `flex` และจากนั้นกำหนดทิศทางของไอเท็มใน flex ด้วย

‍

<div class="flex flex-row">

  <div class="p-2">Item 1</div>

  <div class="p-2">Item 2</div>

  <div class="p-2">Item 3</div>

</div>

‍

ในตัวอย่างข้างต้น `flex-row` จะทำให้ไอเท็มใน flex เรียงต่อกันจากซ้ายไปขวา คุณสามารถใช้ `flex-col` เพื่อจัดเรียงไอเท็มจากบนลงล่างได้

‍

<div class="flex flex-col">

  <div class="p-2">Item 1</div>

  <div class="p-2">Item 2</div>

  <div class="p-2">Item 3</div>

</div>

‍

การใช้งานคลาสเหล่านี้จะช่วยให้คุณสามารถใช้ความสามารถของ Flexbox ได้อย่างง่ายดายผ่าน Tailwind CSS ทำให้การจัดเรียงและจัดการเลย์เอาท์ของหน้าเว็บของคุณมีความยืดหยุ่นและตอบสนองต่อขนาดหน้าจอได้ดีขึ้น

‍

ตัวอย่างการใช้ Padding (การเพิ่มระยะขอบด้านใน) 

‍

Tailwind มีระบบออกแบบที่ช่วยให้รักษาระดับความสม่ำเสมอในการออกแบบได้ แต่มีสิ่งที่ควรรู้คือ ไวยากรณ์สำหรับการใช้งานแต่ละยูทิลิตี้

‍

ต่อไปนี้คือยูทิลิตี้สำหรับการเพิ่มระยะขอบด้านในให้กับองค์ประกอบ

‍

• `p` หมายถึง ระยะขอบด้านในทั้งหมดขององค์ประกอบ
• `py` หมายถึง ระยะขอบด้านในด้านบนและด้านล่าง
• `px` หมายถึง ระยะขอบด้านในด้านซ้ายและด้านขวา
• `pt` หมายถึง ระยะขอบด้านในด้านบน
• `pr` หมายถึง ระยะขอบด้านในด้านขวา
• `pb` หมายถึง ระยะขอบด้านในด้านล่าง
• `pl` หมายถึง ระยะขอบด้านในด้านซ้าย

‍

เพื่อใช้งานกับองค์ประกอบ จะต้องใช้ตัวเลขที่เหมาะสมที่ Tailwind ให้มา ตามตัวอย่างต่อไปนี้

‍

<div class="p-4">This element has padding of 4 on all sides</div>

<div class="py-2 px-4">This element has vertical padding of 2 and horizontal padding of 4</div>

‍

การใช้คลาสเหล่านี้จะช่วยให้สามารถกำหนดระยะขอบด้านในสำหรับองค์ประกอบต่างๆ บนหน้าเว็บได้อย่างง่ายดาย และเป็นวิธีที่มีประสิทธิภาพในการรักษาความสม่ำเสมอของการออกแบบ

‍

วิธีการสร้างปลั๊กอิน Tailwind CSS

‍

แม้ว่า Tailwind CSS จะมียูทิลิตี้และระบบออกแบบมากมายที่สร้างไว้ให้แล้ว แต่ก็ยังมีความเป็นไปได้ที่อาจต้องการเพิ่มฟังก์ชันพิเศษบางอย่างเพื่อขยายขอบเขตการใช้งานของ Tailwind  ได้  Tailwind CSS ทำให้เราสามารถทำเช่นนี้ได้โดยการสร้างปลั๊กอิน

‍

ลองมาลงมือทำด้วยการสร้างปลั๊กอินที่เพิ่มสีอะควาและยูทิลิตี้หมุนที่หมุนองค์ประกอบ 150 องศาบนแกน X เราจะสร้างยูทิลิตี้เหล่านี้ในไฟล์ `tailwind.config.js` โดยใช้ JavaScript อย่างง่ายดาย

‍

นี่คือขั้นตอนในการสร้างปลั๊กอิน

‍

1. เปิดไฟล์ `tailwind.config.js` 

‍

2. เพิ่มโค้ด JavaScript ต่อไปนี้เพื่อสร้างปลั๊กอิน

‍

const plugin = require('tailwindcss/plugin')

module.exports = {
 plugins: [
   plugin(function({ addUtilities }) {
     const newUtilities = {
       '.rotate-150': {
         transform: 'rotateX(150deg)'
       },
       '.bg-aqua': {
         backgroundColor: '#00ffff'
       }
     }

     addUtilities(newUtilities)
   })
 ]
}

‍

3. บันทึกและปิดไฟล์ `tailwind.config.js`

‍

ในตัวอย่างข้างต้น เราได้เพิ่มสองยูทิลิตี้ใหม่ `.rotate-150` สำหรับการหมุนองค์ประกอบ 150 องศาบนแกน X และ `.bg-aqua` สำหรับการตั้งค่าพื้นหลังสีอะควา ยูทิลิตี้เหล่านี้สามารถใช้กับองค์ประกอบ HTML ใด ๆ ในโปรเจ็กต์เพื่อให้ได้ผลลัพธ์ตามที่กำหนดไว้

‍

การสร้างปลั๊กอินของตัวเองช่วยให้สามารถปรับแต่งและขยายการใช้งาน Tailwind CSS ได้ตามต้องการ และยังช่วยให้สามารถใช้งานในสถานการณ์ที่เฉพาะเจาะจงและมีความต้องการที่ไม่เหมือนใคร

‍

Framework เป็นตัวเลือกที่มีค่าอย่างยิ่งเมื่อพูดถึงการเร่งกระบวนการทำงาน เพราะจะช่วยให้สร้างเว็บเพจที่ดูดีและเป็นมืออาชีพ ในขณะเดียวกันก็รักษาความสอดคล้องในการออกแบบ โดย Tailwind CSS มอบคลาส CSS ที่เน้น Utility-First CSS Framework จำนวนมากเพื่อช่วยยกระดับการออกแบบและการพัฒนาเว็บไซต์ไปอีกระดับ 

‍

และไม่ว่าคุณจะเพิ่งเริ่มสนใจในสายงานไอที หรือเป็นมืออาชีพที่ต้องการขยายโอกาสในอาชีพ ที่ WeStride พร้อมสนับสนุนด้วยคอร์สเรียนออนไลน์ที่จะทำให้คุณเข้าใจในการทำงานของ Tailwind CSS และพัฒนาทักษะอื่น ๆ ที่จำเป็นสำหรับการก้าวเข้าสู่สายงานไอทีของคุณ มาเรียนรู้และเติบโตไปด้วยกันที่ WeStride ได้แล้ววันนี้!

‍