Tailwind CSS Academy · บทเรียน

การจัดระเบียบ CSS แบบกำหนดเองด้วยเลเยอร์

ใช้ @layer base, @layer components และ @layer utilities เพื่อควบคุมความจำเพาะ และทำให้สไตล์แบบกำหนดเองผสานเข้ากับเอาต์พุตของ Tailwind ได้อย่างถูกต้อง

บทเรียน 3 จาก 413 ขั้นตอน

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

ความท้าทายของลำดับการใช้ CSS

เมื่อใช้คลาสยูทิลิตีของ Tailwind ร่วมกับ CSS ที่กำหนดเอง อาจเกิดความขัดแย้งด้านความจำเพาะได้ กฎ CSS ที่กำหนดเองอย่าง .btn { color: red; } อาจแทนที่ยูทิลิตีของ Tailwind อย่าง text-blue-500 เนื่องจากลำดับในแหล่ง CSS ทั้งที่คุณตั้งใจให้ยูทิลิตีมีผลเหนือกว่า คำสั่ง @layer ของ Tailwind แก้ปัญหานี้ด้วยการให้คุณควบคุมอย่างชัดเจนว่าสไตล์ที่กำหนดเองจะถูกแทรกไว้ที่ใดในลำดับการใช้ CSS

สามเลเยอร์ของ Tailwind

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

/* Order in final CSS output: */
/* 1. @layer base (element defaults) */
/* 2. @layer components (component classes) */
/* 3. @layer utilities (utility classes) */

/* Your main CSS entry file */
@tailwind base;        /* injects base layer */
@tailwind components;  /* injects components layer */
@tailwind utilities;   /* injects utilities layer */

การใช้ @layer base

เลเยอร์ base เหมาะสำหรับการรีเซ็ตระดับองค์ประกอบ สไตล์เริ่มต้นขององค์ประกอบ HTML และสไตล์ส่วนกลางที่ใช้โดยไม่มีเงื่อนไข การใช้งานทั่วไป ได้แก่ การกำหนดแบบอักษรเริ่มต้นให้ body การกำหนดกฎการคำนวณขนาดกล่อง การรีเซ็ตระยะขอบของหัวเรื่อง และการกำหนดสไตล์ลิงก์ สไตล์ในเลเยอร์ base สามารถถูกแทนที่ด้วยสิ่งใดก็ตามในเลเยอร์ components หรือ utilities

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    @apply font-sans antialiased text-gray-900 bg-white;
  }

  h1 { @apply text-3xl font-bold tracking-tight; }
  h2 { @apply text-2xl font-semibold tracking-tight; }
  h3 { @apply text-xl font-semibold; }

  a {
    @apply text-blue-600 hover:underline;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}

การใช้ @layer components

เลเยอร์ components ใช้สำหรับแยกชุดยูทิลิตีที่ใช้ซ้ำออกมาเป็นคลาสที่มีชื่อ โดยใช้ @apply คลาสคอมโพเนนต์ที่กำหนดไว้ที่นี่สามารถถูกแทนที่ด้วยคลาสยูทิลิตีที่ใช้ใน HTML ได้ เพราะยูทิลิตีอยู่ในเลเยอร์ utilities ซึ่งอยู่ลำดับถัดมา ทำให้คลาสคอมโพเนนต์มีความยืดหยุ่น — คลาสเหล่านี้กำหนดค่าเริ่มต้นที่เหมาะสม และสามารถปรับแต่งเป็นรายอินสแตนซ์ด้วยยูทิลิตีได้เสมอ

@layer components {
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden;
  }

  .btn {
    @apply inline-flex items-center px-4 py-2 rounded-lg font-medium text-sm
           transition-colors duration-150 focus:outline-none focus:ring-2;
  }

  .input {
    @apply w-full border border-gray-300 rounded-lg px-4 py-2 text-sm
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
  }
}

การใช้ @layer utilities

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

@layer utilities {
  /* CSS text-wrap utilities (not in Tailwind core) */
  .text-balance { text-wrap: balance; }
  .text-pretty  { text-wrap: pretty; }

  /* Content visibility for performance */
  .content-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
  }

  /* Custom scrollbar hiding */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

เหตุใดตำแหน่งของเลเยอร์จึงสำคัญต่อความจำเพาะ

โดยปกติความจำเพาะของ CSS ขึ้นอยู่กับน้ำหนักของตัวเลือก แต่ข้อกำหนดเลเยอร์ลำดับการใช้ CSS (ซึ่ง Tailwind นำมาใช้) จะมีผลเหนือความจำเพาะ กล่าวคือ กฎในเลเยอร์ที่อยู่หลังจะมีผลเหนือกฎในเลเยอร์ก่อนหน้าเสมอ ไม่ว่าตัวเลือกจะซับซ้อนเพียงใด ดังนั้นคลาสในเลเยอร์ .utilities อย่าง .p-4 (คลาสเดียว) จึงมีผลเหนือคลาสในเลเยอร์ .components อย่าง .card.padded.extra (สามคลาส) ได้โดยอัตโนมัติ

@layer components {
  /* Even with 3 classes, this loses to any utility */
  .card.padded.extra {
    padding: 100px;  /* will be overridden by p-4 utility */
  }
}

@layer utilities {
  /* One class in utilities layer always wins */
  .p-4 { padding: 1rem; }  /* wins! */
}

<!-- In HTML: p-4 correctly applies because utilities layer > components layer -->
<div class="card padded extra p-4">Correct padding: 1rem</div>

เลเยอร์แบบกำหนดเองนอกเหนือจากสามเลเยอร์ของ Tailwind

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

/* Declare layer order at the top of your CSS */
@layer reset, base, vendors, components, utilities, overrides;

/* Then fill in each layer */
@layer reset {
  * { box-sizing: border-box; margin: 0; }
}

@layer vendors {
  /* Third-party library styles here */
}

@layer overrides {
  /* Emergency overrides — highest specificity */
  .force-hidden { display: none !important; }
}

สไตล์ที่อยู่นอกเลเยอร์ทั้งหมด

CSS ที่เขียนไว้ นอก บล็อก @layer ใด ๆ จะมี ความจำเพาะสูงกว่าสไตล์ที่อยู่ในเลเยอร์ใด ๆ ซึ่งหมายความว่า CSS ที่กำหนดเองโดยไม่ครอบด้วย @layer จะมีผลเหนือยูทิลิตีของ Tailwind ที่อยู่ในเลเยอร์เสมอ และอาจทำให้การจัดวางเกิดปัญหาที่คาดไม่ถึง ให้ครอบสไตล์ที่กำหนดเองไว้ในเลเยอร์ที่เหมาะสมเสมอ — หรือสร้างเลเยอร์สำหรับการแทนที่โดยเฉพาะ — เพื่อหลีกเลี่ยงความขัดแย้งกับลำดับการใช้ CSS ของ Tailwind

/* CAUTION: This is outside any layer and overrides ALL layered styles */
.btn {
  color: red;  /* This will override dark:text-white and hover:text-blue-600! */
}

/* BETTER: Inside the appropriate layer */
@layer components {
  .btn {
    color: red;  /* Can be overridden by utilities like text-white */
  }
}

การใช้ @layer ร่วมกับ @apply

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

@layer base {
  /* Element defaults using @apply */
  body { @apply font-sans antialiased text-base leading-relaxed; }
}

@layer components {
  /* Component classes using @apply */
  .alert { @apply flex items-start gap-3 p-4 rounded-lg border text-sm; }
  .alert-error { @apply alert bg-red-50 border-red-200 text-red-800; }
}

@layer utilities {
  /* Custom utilities using plain CSS */
  .touch-action-none { touch-action: none; }
  .will-change-transform { will-change: transform; }
}

การจัดโครงสร้างไฟล์ CSS ด้วยเลเยอร์

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

/* src/styles/main.css — entry point */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base layer additions */
@layer base {
  @import './base/typography.css';
  @import './base/reset.css';
}

/* Component layer */
@layer components {
  @import './components/buttons.css';
  @import './components/cards.css';
  @import './components/forms.css';
}

/* Utility layer additions */
@layer utilities {
  @import './utilities/layout.css';
  @import './utilities/animations.css';
}

การแก้ไขปัญหาเลเยอร์

เมื่อสไตล์ไม่ทำงานตามที่คาดไว้ ให้เปิด Chrome DevTools และดูที่แผง Styles การประกาศที่มีเส้นขีดฆ่าแสดงว่าสไตล์นั้นถูกแทนที่ หากคลาสยูทิลิตีถูก CSS ของคอมโพเนนต์ที่คุณเขียนขีดฆ่าไว้ เป็นไปได้ว่าคุณวางคลาสนั้นไว้นอกเลเยอร์ (ทำให้มีลำดับความสำคัญในลำดับการใช้ CSS สูงกว่า) หรือวางไว้ในเลเยอร์ผิด การย้ายไปไว้ใน @layer components ควรทำให้พฤติกรรมที่ยูทิลิตีมีผลเหนือกว่ากลับมาถูกต้อง

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจของคุณเกี่ยวกับการจัดระเบียบ CSS ที่กำหนดเองด้วยคำสั่ง @layer ของ Tailwind

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปบทเรียน

ในบทเรียนนี้ คุณได้เรียนรู้ว่า เลเยอร์ทั้งสามของ Tailwind — base, components, utilities — สร้างลำดับชั้นของการใช้ CSS ซึ่งแต่ละเลเยอร์ที่อยู่หลังจะแทนที่เลเยอร์ก่อนหน้า @layer base ใช้สำหรับค่าเริ่มต้นขององค์ประกอบ @layer components ใช้สำหรับคลาสคอมโพเนนต์ที่แยกออกมา และ @layer utilities ใช้สำหรับคลาสยูทิลิตีที่กำหนดเอง ต่อไปเราจะสำรวจข้อควรระวังของ @apply และเวลาที่ควรใช้การแยกคอมโพเนนต์แทน

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 30
บทเรียน: 120

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “การจัดระเบียบ CSS แบบกำหนดเองด้วยเลเยอร์” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การจัดระเบียบ CSS แบบกำหนดเองด้วยเลเยอร์”

ใช้ @layer base, @layer components และ @layer utilities เพื่อควบคุมความจำเพาะ และทำให้สไตล์แบบกำหนดเองผสานเข้ากับเอาต์พุตของ Tailwind ได้อย่างถูกต้อง คุณปฏิบัติ Tailwind CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “การจัดระเบียบ CSS แบบกำหนดเองด้วยเลเยอร์” ใช้เวลานานแค่ไหน

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

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

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

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

@apply ทำอะไรและควรใช้เมื่อใด
การสร้างคลาสองค์ประกอบที่นำกลับมาใช้ซ้ำได้
การจัดระเบียบ CSS แบบกำหนดเองด้วยเลเยอร์
ข้อควรระวังและทางเลือกของ @apply

← กลับไปที่ Tailwind CSS Academy