0Pricing
Tailwind CSS Academy · درس

أولى صفحاتك باستخدام Tailwind

أنشئ قسمًا رئيسيًا بسيطًا باستخدام فئات Tailwind المساعدة فقط، وتدرّب على سير العمل القائم على الفئات.

أولى صفحاتك باستخدام Tailwind درس مجاني في Tailwind CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 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» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Tailwind CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Tailwind CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «أولى صفحاتك باستخدام Tailwind»؟

أنشئ قسمًا رئيسيًا بسيطًا باستخدام فئات Tailwind المساعدة فقط، وتدرّب على سير العمل القائم على الفئات. تتمرن على Tailwind CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Tailwind CSS Academy؟

لا تُشترط خبرة سابقة. Tailwind CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «أولى صفحاتك باستخدام Tailwind»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Tailwind CSS Academy هذا؟

نعم. كل درس في Tailwind CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. شرح CSS القائم على الأدوات
  2. تثبيت Tailwind وإعداده
  3. أولى صفحاتك باستخدام Tailwind
  4. Tailwind في مقابل CSS التقليدي
← العودة إلى Tailwind CSS Academy