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

Tailwind CSS 是一个功能优先的 CSS 框架，它通过提供大量可组合的实用类，让开发者能够直接在 HTML 中快速构建自定义设计。与 Bootstrap 等提供预置组件的框架不同，Tailwind CSS 赋予你完全的控制权，你通过组合这些细粒度的类来创造独特的用户界面，无需编写自定义 CSS。这种“原子化 CSS”的方法极大地提高了开发效率，并保持了样式的一致性。

ทำไมต้องเลือก Tailwind CSS

在众多 CSS 框架中，Tailwind CSS 脱颖而出，主要得益于其独特的设计哲学和开发体验。

ประสิทธิภาพการพัฒนาสูงมาก

使用 Tailwind CSS，你无需在 HTML 和 CSS 文件之间反复切换。所有样式都通过类名直接写在 HTML 元素上。例如，要创建一个有内边距、蓝色背景和圆角的按钮，你只需要写 <button class="px-4 py-2 bg-blue-500 rounded-lg">按钮</button>。这种工作流消除了为类命名和寻找对应 CSS 规则的认知负担，让构建界面变得像搭积木一样快速直观。

แนะนำให้อ่าน เรียนรู้ Tailwind CSS: สร้างเว็บไซต์สมัยใหม่ที่ตอบสนองได้ตั้งแต่เริ่มต้น。

การออกแบบตอบสนองได้รับการสนับสนุนในตัว

การสร้างเว็บเพจที่ตอบสนองเป็นจุดแข็งของ Tailwind CSS เฟรมเวิร์กมีคำนำหน้าแบบตอบสนองในตัวตามจุดพักทั่วไป เช่น sm:、md:、lg:、xl: 和 2xl:คุณสามารถเพิ่มคำนำหน้าเหล่านี้ก่อนคลาสยูทิลิตี้ใดๆ เพื่อระบุให้สไตล์นั้นมีผลที่ความกว้างหน้าจอเฉพาะ ทำให้การสร้างเลย์เอาต์ตอบสนองที่ซับซ้อนทำได้ง่ายอย่างยิ่ง และโค้ดก็ชัดเจนอ่านง่าย

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

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

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

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

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

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

ส่วนลด 40%

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

ความสามารถในการปรับแต่งที่ทรงพลัง

แม้ว่า Tailwind จะมีการกำหนดค่าเริ่มต้นที่หลากหลาย แต่ก็ไม่ได้ตายตัวเลย การกำหนดค่าผ่านไฟล์ที่อยู่ไดเรกทอรีรูทของโปรเจกต์ tailwind.config.js ไฟล์การกำหนดค่า คุณสามารถปรับแต่งทุกอย่างได้ลึกซึ้ง: สี, ระยะห่าง, ฟอนต์, จุดพัก ฯลฯ ซึ่งหมายความว่าคุณสามารถทำให้ Tailwind เข้ากับระบบการออกแบบของคุณได้อย่างสมบูรณ์แบบ แทนที่จะต้องปรับการออกแบบของคุณให้เข้ากับเฟรมเวิร์ก

ประสิทธิภาพการผลิตขั้นสุด

Tailwind CSS ใช้ PurgeCSS (ซึ่งถูกสร้างไว้ใน Tailwind CSS v2.1+ เป็น purge ตัวเลือก) เพื่อสแกน HTML, องค์ประกอบ JavaScript และไฟล์เทมเพลตใดๆ ของคุณ และลบ CSS ที่ไม่ได้ใช้ทั้งหมดออกโดยอัตโนมัติ สิ่งนี้ทำให้แน่ใจว่าไฟล์ CSS สุดท้ายสำหรับสภาพแวดล้อมการผลิตมีขนาดเล็กมาก มักจะมีเพียงไม่กี่กิโลไบต์ ซึ่งช่วยเพิ่มความเร็วในการโหลดหน้าได้อย่างมีนัยสำคัญ

การตั้งค่าเบื้องต้นและการเริ่มต้นโปรเจกต์

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

ติดตั้งผ่าน npm

ขั้นแรก ใช้ npm หรือ yarn ในการเริ่มต้นโปรเจกต์และติดตั้ง Tailwind CSS พร้อมทั้ง dependencies ของมัน

แนะนำให้อ่าน เรียนรู้ Tailwind CSS: สร้างเว็บไซต์สมัยใหม่ที่ปรับแต่งตามอุปกรณ์ตั้งแต่เริ่มต้น。

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

npx tailwindcss init คำสั่งจะสร้างไฟล์ tailwind.config.js ด้วย ไฟล์การกำหนดค่า

ตั้งค่า PostCSS

ที่ root directory ของโปรเจกต์ สร้างไฟล์ postcss.config.js และเพิ่ม Tailwind CSS กับ Autoprefixer เป็นปลั๊กอิน

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

นำเข้าสไตล์ Tailwind

สร้างไฟล์ CSS เช่น src/styles.cssและใช้ @tailwind คำสั่งสำหรับการฉีดสไตล์พื้นฐาน คลาสคอมโพเนนต์ และคลาสยูทิลิตี้ของ Tailwind

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

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

เข้าชม Bluehost

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

สุดท้าย นำเข้าไฟล์ CSS ที่คอมไพล์แล้วในไฟล์ HTML ของคุณ หรือนำเข้าในไฟล์ JavaScript หลักของคุณ (หากใช้เครื่องมือสร้างเช่น webpack หรือ Vite)

คู่มือการใช้คลาสยูทิลิตี้หลัก

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

การจัดวางและระยะห่าง

คลาสที่ควบคุมการจัดวางและระยะห่างนั้นใช้งานง่ายมาก ตัวอย่างเช่นflex、grid สำหรับโมเดลการจัดวาง;m-4 หมายถึงระยะขอบภายนอก 1rem,p-4 หมายถึงระยะขอบภายใน 1rem ทิศทางสามารถระบุได้ด้วย t(บน),r(ขวา)、b(ล่าง)、l(ซ้าย)、x（แนวนอน）、y(แนวตั้ง) เพื่อกำหนด เช่น mt-2、px-4。

แนะนำให้อ่าน Tailwind CSS เริ่มต้นและปฏิบัติจริง: สร้างอินเทอร์เฟซเว็บที่ตอบสนองและทันสมัยจากศูนย์。

สีและพื้นหลัง

ชื่อคลาสสีมักประกอบด้วยคำนำหน้าคุณสมบัติและค่าสี ตัวอย่างเช่นbg-gray-100 ตั้งค่าสีพื้นหลังtext-blue-600 ตั้งค่าสีข้อความborder-red-300 ตั้งค่าสีขอบ ตัวเลขยิ่งมาก สีมักจะเข้มขึ้น คุณยังสามารถกำหนดจานสีของคุณเองในไฟล์การตั้งค่าได้

การจัดวางตัวอักษรและขนาด

ควบคุมสไตล์ข้อความโดยใช้ text-{size}（เช่น text-lg）、font-{weight}（เช่น font-bold）。ควบคุมขนาดโดยใช้ w-（ความกว้าง）และ h-（ความสูง）เป็นคำนำหน้า เช่น w-64 หมายถึงความกว้าง 16rem。

โฮสติ้ง.com

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

เยี่ยมชมhosting.com

การตอบสนองและสถานะการโต้ตอบ

ตามที่ได้กล่าวไว้ก่อนหน้านี้ เพียงเพิ่มคำนำหน้าที่ตอบสนอง นอกจากนี้ Tailwind ยังมีรูปแบบสถานะ เช่น hover:、focus:、active:ซึ่งช่วยให้คุณกำหนดสถานะการโต้ตอบขององค์ประกอบได้อย่างง่ายดาย ตัวอย่างเช่นhover:bg-blue-700 จะเปลี่ยนสีพื้นหลังเมื่อเมาส์วางเหนือ

สร้างตัวอย่างแถบนำทางที่ตอบสนองต่อหน้าจอ

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

การสร้างโครงสร้าง HTML

ขั้นแรก เราจะสร้างโครงสร้าง HTML พื้นฐานสำหรับแถบนำทาง

<nav class="bg-gray-800">
  <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 items-center">
        <div class="text-white font-bold text-xl">แบรนด์ของฉัน</div>
        <!-- 桌面端导航链接 -->
        <div class="hidden md:block ml-10">
          <div class="flex space-x-4">
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">หน้าแรก</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">เกี่ยวกับ</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">บริการ</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">ติดต่อ</a>
          </div>
        </div>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button type="button" class="text-gray-400 hover:text-white">
          <!-- 汉堡菜单图标 (简化版) -->
          <span class="block w-6 h-0.5 bg-white mb-1"></span>
          <span class="block w-6 h-0.5 bg-white mb-1"></span>
          <span class="block w-6 h-0.5 bg-white"></span>
        </button>
      </div>
    </div>
  </div>
  <!-- 移动端下拉菜单 (默认隐藏) -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md">หน้าแรก</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md">เกี่ยวกับ</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md">บริการ</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md">ติดต่อ</a>
    </div>
  </div>
</nav>

การวิเคราะห์สไตล์และตรรกะการตอบสนอง

ในตัวอย่างนี้ เราใช้คลาสสำคัญหลายคลาส:
* hidden md:block：คอนเทนเนอร์ลิงก์นำทางสำหรับเดสก์ท็อป ถูกซ่อนไว้โดยค่าเริ่มต้นบนอุปกรณ์เคลื่อนที่ และแสดงบนหน้าจอขนาดกลาง (md) ขึ้นไป
* md:hidden：ปุ่มเมนูสำหรับอุปกรณ์เคลื่อนที่ ถูกซ่อนไว้บนหน้าจอขนาดกลางขึ้นไป
* flex、justify-between、items-center：ใช้ Flexbox สำหรับการจัดวางและจัดแนวในแนวนอน
* max-w-7xl mx-auto：จัดเนื้อหานำทางให้อยู่กึ่งกลางและจำกัดความกว้างสูงสุด
* hover:bg-gray-700: กำหนดสถานะเมื่อเมาส์วางอยู่

เพื่อสลับเมนูแบบเคลื่อนที่ คุณต้องใช้ JavaScript เพิ่มเติมเพื่อสลับ id="mobile-menu" บน div ของ hidden คลาส นี่แสดงให้เห็นว่า Tailwind ทำงานร่วมกับ JavaScript ได้อย่างไรอย่างราบรื่น

สรุป

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

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

Tailwind CSS จะทำให้ HTML ดูรกตาหรือไม่?

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

จะทับสไตล์หรือเพิ่มสไตล์ที่กำหนดเองได้อย่างไร?

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

Tailwind CSS เหมาะที่จะใช้กับเฟรมเวิร์ก frontend ใดบ้าง

Tailwind CSS สามารถผสานรวมได้อย่างสมบูรณ์กับเฟรมเวิร์กและไลบรารีฟรอนต์เอนด์หลักทั้งหมด รวมถึง React, Vue.js, Angular, Svelte เป็นต้น อย่างเป็นทางการยังมีเครื่องมือและปลั๊กอินพิเศษสำหรับ React และ Vue เช่น @headlessui/react ให้ส่วนประกอบ UI ที่ไม่มีหัว ในเฟรมเวิร์กเมตาเช่น Next.js, Nuxt.js เป็นต้น Tailwind มักเป็นตัวเลือกหลักสำหรับการออกแบบสไตล์

ในสภาพแวดล้อมการผลิต จะเพิ่มประสิทธิภาพปริมาณของ Tailwind CSS ได้อย่างไร?

การเพิ่มประสิทธิภาพจะดำเนินการโดยอัตโนมัติ คุณจำเป็นต้อง tailwind.config.js ไฟล์อย่างถูกต้อง content ตัวเลือก (ในเวอร์ชันเก่าคือ purge），ระบุเส้นทางที่รวมไฟล์ HTML, เทมเพลต และ JavaScript ของคุณ เมื่อสร้างเวอร์ชันสำหรับการผลิต Tailwind จะวิเคราะห์ไฟล์เหล่านี้และรวมเฉพาะคลาสสไตล์ที่ใช้เข้าไปในไฟล์ CSS สุดท้าย ทำให้ได้ไฟล์ที่มีขนาดเล็กมาก