0Pricing
Frontend Academy · บทเรียน

Tailwind CSS: แนวทาง Utility-First

ใช้คลาส utility ที่เตรียมไว้โดยตรงใน HTML ปรับแต่งธีมใน tailwind.config.js และใช้ @apply เพื่อแยกรูปแบบที่ใช้ซ้ำ

Tailwind CSS: แนวทาง Utility-First เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

Utility-First CSS คืออะไร

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

การติดตั้ง Tailwind

ติดตั้ง Tailwind และเริ่มต้นการตั้งค่าโปรแกรม โครงการ Vite ใช้ปลั๊กอิน Tailwind สำหรับ Vite หรือปลั๊กอิน PostCSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

# Or with Vite plugin:
npm install -D @tailwindcss/vite

คลาสยูทิลิตีในการใช้งานจริง

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

<div class="bg-white rounded-lg shadow-md p-6 max-w-sm">
  <img class="w-full h-48 object-cover rounded-md mb-4" src="..." alt="...">
  <h2 class="text-xl font-semibold text-gray-800">Card Title</h2>
  <p class="text-gray-500 mt-2">Card description goes here.</p>
  <button class="mt-4 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-colors">
    Read More
  </button>
</div>

คำนำหน้าสำหรับการตอบสนอง

เพิ่มคำนำหน้าจุดแบ่งหน้าจอแบบตอบสนอง md: จะมีผลกับหน้าจอขนาดกลางขึ้นไป ส่วน lg: จะมีผลกับหน้าจอขนาดใหญ่ Tailwind ใช้แนวทางเริ่มจากอุปกรณ์เคลื่อนที่

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

รูปแบบตามสถานะ

เติมคำนำหน้าคลาสด้วยรูปแบบตามสถานะ ได้แก่ hover:, focus:, active:, disabled: และ dark:

<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed">

การตั้งค่าธีม

ปรับแต่งสี ระยะห่าง แบบอักษร และจุดแบ่งหน้าจอใน tailwind.config.js โดยขยายธีมเริ่มต้นหรือแทนที่บางส่วนของธีมนั้น

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        brand: { 500: '#6366f1', 600: '#4f46e5' }
      },
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans]
      }
    }
  }
}

@apply — การแยกรูปแบบ

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

/* Only for highly repeated patterns */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-indigo-600 text-white rounded-md
           hover:bg-indigo-700 transition-colors font-medium;
  }
}

การลบ CSS ที่ไม่ได้ใช้

Tailwind สร้างคลาสยูทิลิตีหลายพันรายการ ในสภาพแวดล้อมใช้งานจริง ระบบจะสแกนไฟล์ต้นฉบับและลบทุกคลาสที่ไม่ได้ใช้ ทำให้ไฟล์ CSS มีขนาดเล็กมาก ซึ่งมักต่ำกว่า 10KB

Tailwind กับ React/Vue

ใน React ให้ใช้ cn() (clsx + twMerge) เพื่อใช้คลาส Tailwind แบบมีเงื่อนไขโดยไม่เกิดความขัดแย้ง ใน Vue ให้ใช้การผูก :class

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...classes: string[]) { return twMerge(clsx(classes)); }

<div className={cn('rounded-lg p-4', featured && 'border-2 border-indigo-600')}>

Tailwind IntelliSense

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

ข้อวิจารณ์และการปกป้อง Tailwind

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

ตรวจสอบอย่างรวดเร็ว

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

ทบทวน: Tailwind CSS

แนวทางยูทิลิตีเป็นหลัก: หนึ่งคลาสเท่ากับหนึ่งพร็อพเพอร์ตี CSS โดยทั่วไปไม่จำเป็นต้องใช้ CSS แบบกำหนดเอง มีคำนำหน้าสำหรับการตอบสนองและสถานะ (md:, hover:) ปรับแต่งด้วย tailwind.config.js ใช้ @apply สำหรับรูปแบบที่ซ้ำกัน กระบวนการสร้างสำหรับสภาพแวดล้อมใช้งานจริงจะสแกนและลบคลาสที่ไม่ได้ใช้ ใช้ cn() + twMerge สำหรับคลาสแบบมีเงื่อนไขใน React และติดตั้งส่วนขยาย IntelliSense

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

บทเรียน “Tailwind CSS: แนวทาง Utility-First” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Tailwind CSS: แนวทาง Utility-First” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Tailwind CSS: แนวทาง Utility-First”

ใช้คลาส utility ที่เตรียมไว้โดยตรงใน HTML ปรับแต่งธีมใน tailwind.config.js และใช้ @apply เพื่อแยกรูปแบบที่ใช้ซ้ำ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “Tailwind CSS: แนวทาง Utility-First” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ระเบียบวิธี BEM: Block, Element และ Modifier
  2. CSS Modules: ชื่อคลาสที่จำกัดขอบเขต
  3. CSS-in-JS: Styled-components และ Emotion
  4. Tailwind CSS: แนวทาง Utility-First
← กลับไปที่ Frontend Academy