คู่มือฉบับสมบูรณ์ของ Tailwind CSS: สร้างอินเทอร์เฟซที่ทันสมัยและตอบสนองได้ตั้งแต่เริ่มต้น

แนวคิดหลักและข้อได้เปรียบของ Tailwind CSS

Tailwind CSS เป็นเฟรมเวิร์ก CSS ที่เน้นการใช้งานจริงเป็นหลัก ซึ่งมีความแตกต่างทางปรัชญาการออกแบบพื้นฐานจากเฟรมเวิร์ก UI แบบดั้งเดิม หลักการสำคัญอยู่ที่การให้ชุดคลาสระดับต่ำที่ใช้งานได้จริง ทำให้นักพัฒนาสามารถผสมผสานและสร้างการออกแบบใดๆ ได้โดยตรงใน HTML แทนที่จะให้คอมโพเนนต์สำเร็จรูปที่ไม่สามารถปรับแต่งได้ วิธีการนี้ช่วยเพิ่มประสิทธิภาพและความยืดหยุ่นในการพัฒนาได้อย่างมาก

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

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

แนะนำให้อ่าน วิธีสร้างเว็บเพจที่ตอบสนองและทันสมัยอย่างรวดเร็วด้วย Tailwind CSS。

วิธีการเริ่มต้นการติดตั้งและการกำหนดค่า

ในการเริ่มใช้ Tailwind CSS ก่อนอื่นคุณต้องติดตั้งลงในโปรเจกต์ของคุณผ่านตัวจัดการแพ็คเกจ วิธีที่ใช้บ่อยที่สุดคือการใช้ npm หรือ yarn เราจะแนะนำวิธีการมาตรฐานในการผสานรวมผ่าน PostCSS ซึ่งเป็นเวิร์กโฟลว์ที่ Tailwind แนะนำ

ผู้ช่วยสร้างเว็บไซต์ WordPress.com

99.999% ความพร้อมใช้งาน+การป้องกันความเสียหายข้ามโซน, สนับสนุนตลอด 24 ชั่วโมงทุกวัน, ซื้อแพ็คเกจบล็อกและใช้ AI สร้างเว็บไซต์ฟรี

ชื่อโดเมนฟรีหนึ่งปี

เข้าถึงผู้ช่วยสร้างเว็บไซต์ WordPress.com →

ผู้ช่วยสร้างเว็บไซต์ UltaHost

900+ เทมเพลตฟรีที่ปรับแต่งได้, ได้รับความสามารถ SEO ที่จำเป็นสำหรับการเปิดรับการค้นหาเว็บไซต์ที่ปรับให้เหมาะสม

ส่วนลด 40%

เข้าถึง UltaHost เว็บไซต์ตัวช่วยสร้าง →

ขั้นแรก เริ่มต้น npm ในไดเรกทอรีรูทของโปรเจกต์และติดตั้ง Tailwind พร้อมกับ dependencies ที่จำเป็น คุณต้องติดตั้ง tailwindcss、postcss 和 autoprefixerจากนั้น สร้างไฟล์การตั้งค่า Tailwind tailwind.config.js และไฟล์การตั้งค่า PostCSS postcss.config.js。

npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

ถัดไป ในไฟล์ CSS หลักของโปรเจกต์ (เช่น src/styles.css 或 @/styles/globals.css) นำเข้าไดเรกทีฟของ Tailwind ไดเรกทีฟเหล่านี้เป็นจุดเริ่มต้นสำหรับการสร้างคลาสยูทิลิตี้ทั้งหมดในระหว่างการสร้าง

@tailwind base;
@tailwind components;
@tailwind utilities;

สุดท้าย ใน tailwind.config.js กำหนดค่า content เส้นทาง, บอก Tailwind ว่าควรสแกนไฟล์ใดสำหรับ PurgeCSS (หรือการตัดต้นไม้ของเครื่องมือ JIT) ซึ่งมีความสำคัญอย่างยิ่งสำหรับการเพิ่มประสิทธิภาพในสภาพแวดล้อมการผลิต

module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

แนะนำให้อ่าน คู่มือฉบับสมบูรณ์สำหรับ Tailwind CSS: จากพื้นฐานสู่การใช้งานจริงในเฟรมเวิร์ก CSS สมัยใหม่。

ไวยากรณ์พื้นฐานของคลาสยูทิลิตี้และการออกแบบที่ตอบสนอง

ไวยากรณ์ของ Tailwind CSS นั้นใช้งานง่ายมาก, ปฏิบัติตามรูปแบบการตั้งชื่อ “คุณสมบัติ-ค่า” ตัวอย่างเช่น,mt-4 หมายถึง margin-top: 1rem;，bg-blue-500 หมายถึง background-color: #3b82f6;ค่าตัวเลขมักจะสอดคล้องกับมาตราส่วนระยะห่างเริ่มต้น (0, 0.25rem, 0.5rem, 1rem...) หรือชุดสี (50, 100, 200, ... 900)

การสร้างอินเทอร์เฟซที่ตอบสนองต่ออุปกรณ์เป็นจุดแข็งของ Tailwind โดยใช้แนวคิดการออกแบบแบบ mobile-first ซึ่งหมายความว่าคลาสที่ไม่มี prefix จะถูกใช้กับทุกขนาดหน้าจอ ในขณะที่คลาสที่มี prefix จะถูกใช้กับจุดพัก (breakpoint) ที่กำหนดขึ้นไป โดยเฟรมเวิร์กมีจุดพักเริ่มต้นห้าจุดในตัว:sm (640px)md (768px)lg (1024px)xl (1280px) และ 2xl (1536px)

<div class="text-sm bg-gray-100 p-4 md:text-base md:bg-white lg:p-8">
  <!--
    在移动设备上：小字体、灰色背景、1rem 内边距。
    在中等屏幕及以上：基准字体、白色背景。
    在大屏幕及以上：2rem 内边距。
  -->
  นี่คือคอนเทนเนอร์ div ที่ตอบสนอง
</div>

นอกจาก prefix สำหรับการตอบสนองต่ออุปกรณ์แล้ว prefix สำหรับสถานะต่างๆ ก็ใช้กันอย่างแพร่หลาย เช่น hover:、focus:、active: ซึ่งช่วยให้คุณสามารถเพิ่มสไตล์สำหรับสถานะการโต้ตอบได้อย่างง่ายดาย

Bluehost ผู้ช่วยสร้างเว็บไซต์

ให้เครื่องมือสร้างเว็บไซต์ AI, แชทออนไลน์และสนับสนุนทางโทรศัพท์ตลอด 24/7, ชื่อโดเมนฟรีหนึ่งปี, CDN ฟรี, SLA เวลาทำงานปกติ 99.99%

เข้าชม Bluehost

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  悬停我
</button>

ธีมที่กำหนดเองและการขยายปลั๊กอิน

แม้ว่า Tailwind จะมีดีไซน์เริ่มต้นที่หลากหลาย แต่คุณก็แทบจะไม่ได้ใช้ค่าเริ่มต้นทั้งหมด การกำหนดธีมเองทำได้โดยการแก้ไข tailwind.config.js ไฟล์ใน theme ส่วน คุณสามารถแทนที่จานสีเริ่มต้น ฟอนต์ สเกลระยะห่าง จุดพัก หรือโทเค็นการออกแบบใดๆ

ตัวอย่างเช่น หากต้องการเพิ่มสีแบรนด์ที่กำหนดเองและขยายสไตล์มุมโค้งเริ่มต้น คุณสามารถกำหนดค่าได้ดังนี้:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1d4ed8',
        'brand-secondary': '#7e22ce',
      },
      borderRadius: {
        'extra-large': '3rem',
      }
    },
  },
}

หลังจากนั้น คุณสามารถใช้คลาสเช่น bg-brand-primary 和 rounded-extra-large คลาสโดยตรงได้

แนะนำให้อ่าน Tailwind CSS พื้นฐานและขั้นสูง: การสร้างหน้าเว็บที่ตอบสนองและทันสมัยตั้งแต่เริ่มต้น。

เมื่อคลาสยูทิลิตี้ในตัวไม่สามารถตอบสนองความต้องการเฉพาะได้ สามารถขยายได้ผ่านระบบปลั๊กอิน คุณสามารถเขียนปลั๊กอินของคุณเอง หรือใช้ปลั๊กอินจากชุมชนที่มีอยู่อย่างหลากหลาย ตัวอย่างเช่น การติดตั้ง @tailwindcss/forms 和 @tailwindcss/typography ปลั๊กอินที่ทางผู้พัฒนาจัดทำขึ้น สามารถจัดการสไตล์ฟอร์มและการจัดวางเนื้อหาที่ไม่มีสไตล์ได้ดีขึ้น

npm install -D @tailwindcss/typography

จากนั้นลงทะเบียนในไฟล์การตั้งค่า:

โฮสติ้ง.com

SSL ฟรี, Cloudflare CDN, WAF, มีให้เลือกมากกว่า 40 ศูนย์ข้อมูลทั่วโลก, ความหน่วงต่ำกว่าใกล้เคียง, การสนับสนุนบริการ 24/7/365, ตอนนี้สามารถประหยัดได้สูงสุด 67%, รองรับ AI build และ SEO optimization

เยี่ยมชมhosting.com

module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
    // 其他插件
  ],
}

เวิร์กโฟลว์สำหรับการสร้างคอมโพเนนต์ที่ซับซ้อน

เมื่อสร้างคอมโพเนนท์ที่ซับซ้อนด้วย Tailwind CSS คุณอาจพบปัญหาชื่อคลาสใน HTML ยาวเกินไป เพื่อแก้ไขปัญหานี้ Tailwind แนะนำแนวทางปฏิบัติที่ดีที่สุดหลายวิธี อย่างแรกคือการใช้ @apply คำสั่ง @apply ใน CSS เพื่อดึงการผสมคลาสยูทิลิตี้ที่ซ้ำซ้อน ซึ่งช่วยรักษาความเรียบร้อยของ HTML และสร้างนามธรรมของ CSS ที่นำกลับมาใช้ใหม่ได้

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

จากนั้นใน HTML คุณเพียงแค่ใช้ชื่อคลาสเดียว:

<button class="btn-primary">
  点击
</button>

สำหรับเฟรมเวิร์กที่ซับซ้อนยิ่งขึ้นและเป็นแบบคอมโพเนนท์ (เช่น React, Vue) แนวทางปฏิบัติที่ดีที่สุดคือการเขียนคลาสสไตล์เหล่านี้ลงในเทมเพลตของคอมโพเนนท์โดยตรง โดยใช้ประโยชน์จากคุณสมบัติการแคปซูลของคอมโพเนนท์เองเพื่อจัดการสไตล์ หากใช้คอมโพเนนท์เดียวกันในหลายสถานที่ คุณอาจพิจารณารวมกับไลบรารี CSS-in-JS (เช่น Twin Macro) หรือดึงรูปแบบที่ซ้ำซ้อนออกมาในไฟล์การกำหนดค่า components เลเยอร์ แต่หลังนี้ในปัจจุบันการพัฒนาแบบคอมโพเนนต์ได้มีการใช้งานน้อยลง

อีกแนวคิดสำคัญคือความสมดุลระหว่าง “ฟังก์ชันก่อน” กับ “ชื่อคลาสเชิงความหมาย” สำหรับรูปแบบ UI ที่ซ้ำกันสูงและมีความหมายชัดเจน (เช่น การ์ด, แบดจ์, แถบนำทาง) การใช้ @apply การสร้างคลาสคอมโพเนนต์ถือว่าสมเหตุสมผล แต่สำหรับการปรับแต่งส่วนใหญ่ที่ทำครั้งเดียวหรือการปรับแต่งเล็กน้อย การยึดติดกับการใช้คลาสฟังก์ชันจะให้ประสิทธิภาพและความยืดหยุ่นในการพัฒนาที่สูงกว่า

สรุป

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

คำถามที่พบบ่อย (FAQ)

การใช้ Tailwind CSS จะทำให้โครงสร้าง HTML ยุ่งเหยิงหรือไม่?

มันขึ้นอยู่กับวิธีการจัดระเบียบของผู้พัฒนา แม้ว่าการเพิ่มคลาสหลายคลาสลงใน HTML โดยตรงอาจดูเยิ่นเย้อ แต่จริงๆ แล้วมันผสานสไตล์และโครงสร้างให้แน่นแฟ้นยิ่งขึ้น ช่วยหลีกเลี่ยงภาระทางความคิดในการสลับไปมาระหว่างไฟล์ CSS และ HTML สำหรับโครงการขนาดใหญ่ สามารถใช้เฟรมเวิร์กคอมโพเนนต์ (เช่น React, Vue) เพื่อห่อหุ้มสไตล์ หรือใช้ @apply @apply เพื่อดึงรูปแบบสไตล์ที่ซ้ำซ้อนออกมา เพื่อรักษาความสะอาดของโค้ด

โหมด JIT ของ Tailwind CSS คืออะไร?

JIT (Just-In-Time) โหมดเป็นเครื่องยนต์ที่ Tailwind CSS v2.1 ได้แนะนำเข้ามา และกลายเป็นโหมดเดียวใน v3.0 มันจะสร้าง CSS ที่ต้องการตามความจำเป็นขณะที่คุณเขียนเทมเพลต แทนที่จะสร้างคลาสที่เป็นไปได้ทั้งหมดล่วงหน้า สิ่งนี้ให้ประโยชน์อย่างมาก: ความเร็วในการสร้างในสภาพแวดล้อมการพัฒนานั้นรวดเร็วมาก รองรับตัวแปรค่าตามอำเภอใจ (เช่น p-[13px]), และแพ็กเกจ CSS ที่สร้างขึ้นในสภาพแวดล้อมการผลิตจะเล็กที่สุดเสมอ เพราะมันรวมเฉพาะสไตล์ที่คุณใช้จริง

จะทับซ้อนหรือรีเซ็ตสไตล์เริ่มต้นของเบราว์เซอร์ได้อย่างไร?

Tailwind CSS ในเลเยอร์พื้นฐาน (@tailwind base) รวมชุดสไตล์รีเซ็ตสมัยใหม่ชื่อ Preflight โดยอิงจาก normalize.cssแต่มีการปรับเปลี่ยนที่เจาะจงมากขึ้น เพื่อเป็นจุดเริ่มต้นที่สะอาดและสม่ำเสมอสำหรับการออกแบบที่ปรับแต่งข้ามเบราว์เซอร์ ตัวอย่างเช่น ลบระยะขอบเริ่มต้นทั้งหมด ตั้งค่าแบบจำลองกล่องเป็น border-boxและทำให้สไตล์หัวเรื่องและรายการเป็นมาตรฐาน หากคุณต้องการปิดใช้งานทั้งหมดหรือแก้ไขบางส่วน สามารถตั้งค่าในไฟล์การกำหนดค่าได้

Tailwind CSS สามารถใช้งานร่วมกับเฟรมเวิร์ก CSS อื่นหรือโครงการที่มีอยู่ได้หรือไม่?

ได้ แต่มีข้อควรระวัง คุณสามารถนำ Tailwind CSS เข้ามาใช้ในโครงการที่มีอยู่ได้อย่างค่อยเป็นค่อยไป ต้องระวังว่าการรีเซ็ต CSS (Preflight) ของมันอาจส่งผลต่อสไตล์ที่มีอยู่ วิธีปฏิบัติทั่วไปคือการใช้ Tailwind เฉพาะในคอมโพเนนต์หรือโมดูลใหม่ๆ และจัดการผลกระทบของสไตล์พื้นฐานอย่างระมัดระวัง นอกจากนี้ ต้องแน่ใจว่าชื่อคลาสยูทิลิตีที่สร้างโดย Tailwind จะไม่ขัดแย้งกับชื่อคลาสที่มีอยู่ในโครงการ ซึ่งสามารถทำได้โดยการกำหนดค่าตัวเลือก prefix เพื่อเพิ่มคำนำหน้าเดียวกันให้กับคลาส Tailwind ทั้งหมด

จะปรับแต่งค่าที่เฉพาะเจาะจงที่ไม่มีใน Tailwind ได้อย่างไร?

ในโหมด JIT การกำหนดค่าที่กำหนดเองตามต้องการนั้นง่ายมาก คุณสามารถใช้ไวยากรณ์วงเล็บเหลี่ยมเพื่อระบุค่า CSS ใดๆ โดยตรงในชื่อคลาส ตัวอย่างเช่นtop-[-113px]、bg-[#1da1f2] 或 w-[calc(100%-1rem)]สำหรับค่าที่กำหนดเองที่ต้องการนำกลับมาใช้ทั่วทั้งระบบ แนะนำให้กำหนดในส่วน tailwind.config.js ไฟล์ theme.extend ซึ่งจะช่วยรักษาความสม่ำเสมอของระบบการออกแบบและง่ายต่อการบำรุงรักษา