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

Tailwind CSS คืออะไร

Tailwind CSS เป็นเฟรมเวิร์ก CSS ที่เน้นความสามารถเป็นหลัก โดยช่วยให้นักพัฒนาสามารถสร้างอินเทอร์เฟซผู้ใช้ที่กำหนดเองได้อย่างรวดเร็วผ่านการจัดเตรียมคลาสยูทิลิตี้ (Utility Classes) จำนวนมากที่สามารถประกอบเข้าด้วยกันได้ ต่างจากเฟรมเวิร์กอย่าง Bootstrap ที่จัดเตรียมคอมโพเนนต์สำเร็จรูป Tailwind CSS ไม่ได้จัดเตรียมคอมโพเนนต์สมบูรณ์แบบใดๆ แต่ให้คลาส CSS ที่ละเอียดและเป็นอะตอมมิก ซึ่งช่วยให้คุณสามารถเขียนสไตล์ได้โดยตรงใน HTML

แนวคิดหลักคือ “ยูทิลิตี้มาก่อน” ซึ่งหมายความว่าคุณไม่จำเป็นต้องสลับไปมาระหว่างไฟล์ CSS และ HTML อย่างต่อเนื่อง หรือต้องคิดชื่อคลาสสำหรับคอมโพเนนต์อย่างหนัก (เช่น .card__header--active). คุณเพียงแค่ต้องรวมคลาสเครื่องมือเชิงพรรณนาหลายๆ คลาสเข้าด้วยกันเพื่อให้ได้การออกแบบใดๆ ตัวอย่างเช่น หากต้องการสร้างการ์ดที่มีมุมโค้งมน ช่องว่างภายใน และเงา คุณเพียงแค่เขียน class="rounded-lg p-6 shadow-md"วิธีนี้ช่วยเพิ่มประสิทธิภาพการพัฒนาอย่างมากและยังคงความสม่ำเสมอของสไตล์

การตั้งค่าสภาพแวดล้อมและการกำหนดค่าพื้นฐาน

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

แนะนำให้อ่าน ปลดปล่อยศักยภาพของ Tailwind CSS: คู่มือปฏิบัติจากพื้นฐานสู่ขั้นสูง。

ติดตั้งแพ็คเกจหลักผ่าน npm

ก่อนอื่น คุณต้องติดตั้ง Tailwind CSS และการอ้างอิงผ่าน npm หรือ yarn ในไดเรกทอรีรากของโปรเจกต์ของคุณ ให้รันคำสั่งต่อไปนี้:

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

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

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

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

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

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

ส่วนลด 40%

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

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

นี่จะติดตั้ง Tailwind CSS, PostCSS สำหรับประมวลผล CSS และ Autoprefixer สำหรับเพิ่มคำนำหน้าเบราว์เซอร์อัตโนมัติ พร้อมกันnpx tailwindcss init คำสั่งจะสร้างไฟล์การกำหนดค่าเริ่มต้น tailwind.config.js。

กำหนดเส้นทางเนื้อหาและสร้าง CSS

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

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

จากนั้นสร้างไฟล์ CSS หลัก (เช่น src/input.css），และเพิ่มคำสั่งของ Tailwind

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

สุดท้าย รันกระบวนการ build ผ่าน command line เพื่อประมวลผล CSS input ของคุณเป็นไฟล์สไตล์ที่พร้อมใช้งาน

แนะนำให้อ่าน เชี่ยวชาญ Tailwind CSS: คู่มือปฏิบัติจากเริ่มต้นสู่การใช้งานจริง。

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

ตอนนี้ คุณสามารถนำเข้าไฟล์ที่สร้างแล้วใน HTML ./dist/output.css และเริ่มใช้ utility class ของ Tailwind ได้แล้ว

คลาสยูทิลิตี้หลักและการออกแบบที่ตอบสนอง

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

ภาพรวมคลาสยูทิลิตี้ที่ใช้บ่อย

การตั้งชื่อคลาสยูทิลิตี้มักจะแมปโดยตรงกับคุณสมบัติ CSS และใช้ตัวย่อ ตัวอย่างเช่น:
* 间距：p-4 (padding: 1rem), m-2 (margin: 0.5rem), space-x-4 (ระยะห่างแนวนอนขององค์ประกอบย่อย)。
* 排版：text-lg (ขนาดตัวอักษร), font-bold (ความหนาของตัวอักษร), text-center (การจัดตำแหน่งข้อความ)
* 颜色：bg-blue-500 (สีพื้นหลัง), text-gray-800 (สีข้อความ), border-red-300 (สีขอบ)
* 布局：flex, items-center (align-items: center), justify-between (justify-content: space-between)
* 尺寸：w-64 (ความกว้าง: 16rem), h-full (ความสูง: 100%).
* 效果：rounded (มุมโค้ง), shadow (เงา), opacity-50 (ความโปร่งใส)

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

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

เข้าชม Bluehost

การออกแบบเลย์เอาต์ที่ตอบสนองต่ออุปกรณ์

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

ตัวอย่างเช่น รหัสต่อไปนี้สร้างเลย์เอาต์ที่ซ้อนกันโดยค่าเริ่มต้นและจัดเรียงแบบเคียงข้างกันบนหน้าจอขนาดกลาง:

<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/2 p-4 bg-blue-100">เนื้อหาด้านซ้าย</div>
  <div class="w-full md:w-1/2 p-4 bg-green-100">เนื้อหาด้านขวา</div>
</div>

ด้วยการรวมคำนำหน้าเหล่านี้ คุณสามารถสร้างอินเทอร์เฟซที่ตอบสนองต่อการเปลี่ยนแปลงได้อย่างซับซ้อนซึ่งเหมาะกับทุกขนาดหน้าจอได้อย่างง่ายดาย

แนะนำให้อ่าน คู่มือฉบับสมบูรณ์ของ Tailwind CSS: ตั้งแต่เริ่มต้นจนเชี่ยวชาญ เพื่อสร้างเว็บไซต์สมัยใหม่。

ภาคปฏิบัติ: การสร้างคอมโพเนนท์แถบนำทาง

ให้เรารวมความรู้ที่ได้เรียนรู้ทั้งหมดเข้าด้วยกันโดยการสร้างแถบนำทางที่ตอบสนองต่อการเปลี่ยนแปลงทั่วไป แถบนำทางนี้จะแสดงในแนวนอนบนหน้าจอขนาดใหญ่ และจะพับเก็บเป็นเมนูแฮมเบอร์เกอร์บนหน้าจอขนาดเล็ก

เขียนโครงสร้างพื้นฐานและสไตล์

ขั้นแรก เราสร้างโครงร่าง HTML ของแถบนำทางและใช้สไตล์พื้นฐาน

โฮสติ้ง.com

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

เยี่ยมชมhosting.com

<nav class="bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- 网站Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="text-white font-bold text-xl">แบรนด์ของฉัน</a>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">หน้าแรก</a>
          <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">เกี่ยวกับเรา</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">บริการ</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">ติดต่อ</a>
        </div>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700">
          <!-- 汉堡菜单图标（简化版） -->
          <span class="sr-only">เปิดเมนูหลัก</span>
          <svg class="block h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

ในตอนนี้ การนำทางบนเดสก์ท็อปเสร็จสมบูรณ์แล้ว เราใช้ hidden md:block ควบคุมลิงก์นำทางบนเดสก์ท็อปให้แสดงเฉพาะบนหน้าจอขนาดกลางขึ้นไปเท่านั้น

เพิ่มการโต้ตอบและเมนูมือถือ

เพื่อแสดงเมนูเมื่อคลิกปุ่มบนอุปกรณ์มือถือ เราจำเป็นต้องใช้ JavaScript เล็กน้อย ที่นี่เราใช้ JS แบบธรรมดาเพื่อสลับคลาสที่ควบคุมการแสดงเมนู
ขั้นแรก เพิ่ม ID ให้กับปุ่มเมนูมือถือและเนื้อหาเมนู และปรับเปลี่ยนปุ่มเมนูเพื่อเรียกใช้ฟังก์ชัน

<!-- 修改后的移动端菜单按钮 -->
<button id="mobile-menu-button" type="button" class="..."> ... </button>

<!-- 新增的移动端菜单内容，初始隐藏 -->
<div id="mobile-menu" class="md:hidden hidden">
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">หน้าแรก</a>
    <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">เกี่ยวกับเรา</a>
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">บริการ</a>
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">ติดต่อ</a>
  </div>
</div>

จากนั้น เพิ่มสคริปต์ที่ด้านล่างของหน้า

<script>
  const menuButton = document.getElementById('mobile-menu-button');
  const mobileMenu = document.getElementById('mobile-menu');

menuButton.addEventListener('click', () => {
    // 切换 'hidden' 类来显示/隐藏菜单
    mobileMenu.classList.toggle('hidden');
  });
</script>

จนถึงตอนนี้ แถบนำทางที่ตอบสนองได้อย่างสมบูรณ์ก็ถูกสร้างขึ้นแล้ว โดยการรวมคลาสยูทิลิตี้ที่แตกต่างกัน เราสามารถสร้างคอมโพเนนต์นี้ได้โดยไม่ต้องเขียน CSS ที่กำหนดเองแม้แต่บรรทัดเดียว

สรุป

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

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

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

ไฟล์สไตล์ของ Tailwind CSS จะใหญ่ไหม?

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

เมื่อเทียบกับ Bootstrap ข้อดีหลักของ Tailwind CSS คืออะไร?

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

ในโครงการทีม จะรักษาความสม่ำเสมอของโค้ด Tailwind CSS อย่างไร

สามารถใช้การผสมผสานระหว่างไฟล์คอนฟิกของ Tailwind CSS กับปลั๊กอิน IDE ได้ ใน tailwind.config.js กำหนดโทเค็นการออกแบบ เช่น สี, ระยะห่าง, ฟอนต์ ของโปรเจกต์อย่างเป็นเอกภาพ สมาชิกในทีมสามารถใช้ปลั๊กอินอย่างเป็นทางการสำหรับ VS Code หรือ IntelliJ IDE ซึ่งมีฟีเจอร์การเติมข้อความอัตโนมัติ, การเน้นไวยากรณ์, และการแสดงตัวอย่างเมื่อวางเมาส์ค้าง ช่วยลดข้อผิดพลาดในการสะกดชื่อคลาสและเพิ่มประสิทธิภาพการพัฒนาได้อย่างมีประสิทธิภาพ

จะจัดการกับสถานะ hover หรือ focus ที่ซับซ้อนใน Tailwind CSS อย่างไร?

Tailwind CSS มีคำนำหน้าที่หลากหลายสำหรับสถานะตัวแปร เช่น hover:, focus:, active:, disabled: เป็นต้น คุณสามารถเพิ่มพวกเขาไว้หน้าคลาสยูทิลิตี้ได้อย่างง่ายดาย ตัวอย่างเช่นhover:bg-blue-600 focus:ring-2 focus:ring-blue-500 คุณสามารถกำหนดสีพื้นหลังเมื่อโฮเวอร์และวงแหวนเมื่อโฟกัสให้กับปุ่มได้