Tailwind CSS Academy · บทเรียน

Tailwind เทียบกับ CSS แบบดั้งเดิม

เปรียบเทียบการตกแต่งรูปแบบที่ใช้ยูทิลิตีเป็นหลักกับการเขียน CSS ธรรมดาและ BEM แล้วเรียนรู้ว่าแนวทางใดเหมาะกับสถานการณ์ใด

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

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

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

The Old Way: Semantic CSS

The old way is semantic CSS: descriptive class names like .navbar or .card in a separate file, meant to describe purpose. Methods like BEM grew from this.

/* Traditional CSS */
.hero-title {
  font-size: 3rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
}

<h1 class="hero-title">Build Something Great</h1>

What Is BEM?

BEM means Block, Element, Modifier: a Block like .card, an Element like .card__title, and a Modifier like .card--featured. Clear, but it takes discipline.

<!-- BEM naming convention -->
<div class="card card--featured">
  <img class="card__image" src="thumb.jpg" alt="" />
  <h2 class="card__title">Featured Post</h2>
  <p class="card__description">A short summary...</p>
  <a class="card__link card__link--primary" href="#">Read More</a>
</div>

The Same Card in Tailwind

Here is that same card in Tailwind. No CSS file at all — every choice shows in the HTML: rounded-xl shadow-md for shape, text-xl font-bold for the title.

<!-- Tailwind equivalent -->
<div class="rounded-xl shadow-md overflow-hidden bg-white border border-indigo-200">
  <img class="w-full h-48 object-cover" src="thumb.jpg" alt="" />
  <div class="p-6">
    <h2 class="text-xl font-bold text-gray-900 mb-2">Featured Post</h2>
    <p class="text-gray-500 text-sm mb-4">A short summary...</p>
    <a class="text-indigo-600 font-semibold hover:underline" href="#">Read More</a>
  </div>
</div>

The Specificity Problem in Traditional CSS

Traditional CSS has a specificity headache: rules fight over which wins, leading to !important everywhere and brittle code. Tailwind utilities stay predictable.

/* Specificity conflict example */
.sidebar .card .card__title { color: red; }    /* specificity: 0,3,0 */
.featured-section .card__title { color: blue; } /* specificity: 0,2,0 */

/* Which color wins? Depends on file order AND specificity */
/* This becomes unmanageable at scale */

CSS File Growth Over Time

Plain CSS files grow forever because nobody dares delete old rules. Tailwind strips unused utilities at build time, so your CSS never piles up dead weight.

Switching Between Files

With classic CSS you keep switching between HTML and CSS for every tweak. Tailwind keeps you in the HTML, which speeds up your workflow a lot.

<!-- With Tailwind: no CSS file to open -->
<button class="py-2 px-4 bg-green-500 text-white rounded hover:bg-green-600">
  Submit
</button>

<!-- With traditional CSS: go find/create .submit-button in your CSS file -->
<button class="submit-button">Submit</button>

When Traditional CSS Still Wins

Sometimes traditional CSS still wins: styling third-party HTML you cannot edit, complex keyframe animations, or a public stylesheet for other developers.

/* Complex animation: better in CSS than utility classes */
@keyframes wave {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}
.wave-animation {
  animation: wave 1s ease-in-out infinite;
}

Consistency: Scales vs Freeform Values

Tailwind quietly enforces consistency. Instead of hand-typed 13px or 17px padding, you pick from a 4px scale, so designs stay harmonious by default.

<!-- Tailwind spacing: always consistent multiples -->
<div class="p-4">  <!-- 16px -->
<div class="p-6">  <!-- 24px -->
<div class="p-8">  <!-- 32px -->

<!-- vs Traditional CSS: any value is valid -->
div { padding: 13px; } /* Why 13? Nobody knows. */

Performance Comparison

Will all those classes hurt performance? No — repeated classes compress brilliantly, and Tailwind CSS is usually far smaller than an unoptimized stylesheet.

Team Onboarding: Tailwind vs CSS

Onboarding is easier too. Anyone who knows the Tailwind docs can read and edit any component, since class names mean the same thing in every project.

Choosing the Right Approach

So which to choose? Tailwind for app UI and design systems you control; traditional CSS for theming or CMS HTML. Many projects happily use both.

Quick Check

Quick check! Compare Tailwind and CSS in your head. ⚖️

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

Lesson Recap

Nice work! Traditional CSS names things in files while Tailwind composes in HTML, BEM does not fix file growth, and the scale enforces consistency. Next: typography.

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

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

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

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

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

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

บทเรียน “Tailwind เทียบกับ CSS แบบดั้งเดิม” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Tailwind เทียบกับ CSS แบบดั้งเดิม”

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

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

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

บทเรียน “Tailwind เทียบกับ CSS แบบดั้งเดิม” ใช้เวลานานแค่ไหน

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

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

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

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

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