Tailwind CSS Academy · บทเรียน

หน้า Tailwind แรกของคุณ

สร้างส่วนฮีโร่อย่างง่ายโดยใช้เฉพาะคลาสยูทิลิตีของ Tailwind เพื่อทำความคุ้นเคยกับเวิร์กโฟลว์ที่ใช้คลาสเป็นพื้นฐาน

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

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

Planning a Hero Section

A hero section is the first thing visitors see: a headline, subheadline, and a button or two. You will build a full one using only Tailwind utilities.

Setting Up the HTML Shell

Start with an HTML shell and link your compiled CSS. Add min-h-screen so the body fills the viewport and bg-gray-50 for a soft canvas to build on.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="./dist/output.css" rel="stylesheet" />
  <title>My First Tailwind Page</title>
</head>
<body class="min-h-screen bg-gray-50">
  <!-- content goes here -->
</body>
</html>

Creating the Navigation Bar

Build a navbar with flex items-center justify-between to push the logo left and links right. Add bg-white shadow-sm and some padding for a clean, lifted look.

<nav class="bg-white shadow-sm px-8 py-4 flex items-center justify-between">
  <span class="text-xl font-bold text-indigo-600">MyBrand</span>
  <div class="flex gap-6">
    <a href="#" class="text-gray-600 hover:text-indigo-600">Home</a>
    <a href="#" class="text-gray-600 hover:text-indigo-600">About</a>
    <a href="#" class="text-gray-600 hover:text-indigo-600">Contact</a>
  </div>
</nav>

Building the Hero Container

Center the hero container with max-w-4xl mx-auto so it stays readable on big screens, then add px-6 py-24 for space and text-center to line everything up.

<section class="px-6 py-24">
  <div class="max-w-4xl mx-auto text-center">
    <!-- headline, subheadline, buttons -->
  </div>
</section>

Writing the Headline

Write a bold headline: text-5xl font-extrabold for size and weight, text-gray-900 for strong contrast, and tracking-tight so big letters feel cohesive.

<h1 class="text-5xl font-extrabold text-gray-900 tracking-tight mb-6">
  Build beautiful UIs
  <span class="text-indigo-600">faster than ever</span>
</h1>

Adding the Subheadline

Add a subheadline below it: text-xl text-gray-500 keeps it quiet and supporting, max-w-2xl mx-auto holds a comfy line length, and mb-10 spaces the buttons.

<p class="text-xl text-gray-500 max-w-2xl mx-auto mb-10">
  Tailwind CSS lets you design any component directly in your HTML
  without writing a single line of custom CSS.
</p>

Creating Call-to-Action Buttons

Add two CTA buttons: a filled primary with bg-indigo-600 text-white and an outline secondary. Wrap them in a flex container with a gap to sit side by side.

<div class="flex flex-col sm:flex-row gap-4 justify-center">
  <a href="#" class="bg-indigo-600 text-white font-semibold py-3 px-8 rounded-lg hover:bg-indigo-700 transition-colors">
    Get Started
  </a>
  <a href="#" class="border-2 border-indigo-600 text-indigo-600 font-semibold py-3 px-8 rounded-lg hover:bg-indigo-50 transition-colors">
    Learn More
  </a>
</div>

Adding a Background Gradient

Give the hero depth with a gradient. Use bg-gradient-to-* for direction plus from-* and to-* for colors — a soft from-white to-indigo-50 adds a subtle lift.

<section class="bg-gradient-to-b from-white to-indigo-50 px-6 py-24">
  <!-- hero content -->
</section>

Putting the Hero Together

Here is the full hero with everything combined. Notice the whole design lives in the class names — read them top to bottom and you can picture it exactly.

<section class="bg-gradient-to-b from-white to-indigo-50 px-6 py-24">
  <div class="max-w-4xl mx-auto text-center">
    <h1 class="text-5xl font-extrabold text-gray-900 tracking-tight mb-6">
      Build beautiful UIs
      <span class="text-indigo-600">faster than ever</span>
    </h1>
    <p class="text-xl text-gray-500 max-w-2xl mx-auto mb-10">
      Tailwind CSS lets you design any component directly in your HTML.
    </p>
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <a href="#" class="bg-indigo-600 text-white font-semibold py-3 px-8 rounded-lg hover:bg-indigo-700 transition-colors">
        Get Started
      </a>
      <a href="#" class="border-2 border-indigo-600 text-indigo-600 font-semibold py-3 px-8 rounded-lg hover:bg-indigo-50 transition-colors">
        Learn More
      </a>
    </div>
  </div>
</section>

Adding a Features Row

Below the hero, add a features row. Use grid grid-cols-1 md:grid-cols-3 gap-8 so cards stack on mobile and sit side by side on larger screens.

<section class="max-w-5xl mx-auto px-6 py-16">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="text-center p-6">
      <div class="text-4xl mb-4">&#9889;</div>
      <h3 class="text-lg font-semibold text-gray-900 mb-2">Fast</h3>
      <p class="text-gray-500 text-sm">JIT compilation generates only what you use.</p>
    </div>
    <!-- repeat for other features -->
  </div>
</section>

Finishing With a Footer

Finish with a footer: bg-gray-800 text-gray-400 for a dark contrast and text-center py-8 to keep it compact. That is a full page, built only with utilities.

<footer class="bg-gray-800 text-gray-400 text-center py-8">
  <p class="text-sm">&copy; 2024 MyBrand. Built with Tailwind CSS.</p>
</footer>

Quick Check

Quick check! See how your first page came together. 🎨

Lesson Recap

You built a real page! A hero blends layout, type, and color, gradients use from-* and to-*, and flex and grid handle columns. Next up: Tailwind vs CSS.

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

บทเรียน “หน้า Tailwind แรกของคุณ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “หน้า Tailwind แรกของคุณ”

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

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

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

บทเรียน “หน้า Tailwind แรกของคุณ” ใช้เวลานานแค่ไหน

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

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

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

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

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