0Pricing
Tailwind CSS Academy · درس

لون النص وشفافيته

طبّق أدوات ألوان النص من لوحة ألوان Tailwind، واضبط الشفافية لإنشاء تسلسل هرمي وتباين.

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

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Tailwind's Color System

Tailwind ships a rich color palette: 22 colors like blue, indigo, red, and green, each with 11 shades from 50 (near-white) to 950 (near-black). Plenty to work with.

<!-- Tailwind color naming: {color}-{shade} -->
<p class="text-blue-500">Blue 500</p>
<p class="text-blue-700">Blue 700 (darker)</p>
<p class="text-blue-200">Blue 200 (lighter)</p>

Applying Text Color

Color text with text-{color}-{shade}. Low shades are light, mid are vivid, high are dark. text-gray-700 reads softly on white; text-gray-900 gives bold contrast.

<h1 class="text-gray-900">Main Heading</h1>
<h2 class="text-gray-700">Sub Heading</h2>
<p class="text-gray-600">Body text at a comfortable shade.</p>
<span class="text-gray-400">Metadata or secondary info</span>

Brand Colors in Text

Use vivid shades for meaning: text-blue-600 for links, text-red-600 for errors, text-green-600 for success. These conventions feel instantly familiar to users.

<a href="#" class="text-blue-600 hover:text-blue-800 underline">Link</a>
<p class="text-red-600">Error: Invalid email address.</p>
<p class="text-green-600">Success: Changes saved!</p>
<p class="text-yellow-700">Warning: Disk space is low.</p>

Text Opacity Modifier

Fade a color with the slash modifier: text-blue-600/50 shows blue at 50% opacity. It is cleaner than element opacity, which would dim the children too.

<p class="text-gray-900/100">Fully opaque</p>
<p class="text-gray-900/75">75% opacity</p>
<p class="text-gray-900/50">50% opacity</p>
<p class="text-gray-900/25">25% opacity</p>

Color Contrast for Accessibility

For accessibility, text needs enough contrast — aim for a 4.5:1 ratio. Shade 700 on white usually passes; avoid light shades 50 to 400 as text on white.

<!-- Accessible: dark text on light background -->
<p class="bg-white text-gray-800">Good contrast ratio (passes WCAG AA)</p>

<!-- Inaccessible: light text on white background -->
<p class="bg-white text-gray-300">Poor contrast (fails WCAG)</p>

Text Color on Dark Backgrounds

On dark backgrounds, flip the text light: text-white or text-gray-100 for primary, text-gray-400 for secondary. That is the heart of a clean dark theme.

<div class="bg-gray-900 p-8 rounded-xl">
  <h2 class="text-white font-bold text-2xl mb-2">Dark Card</h2>
  <p class="text-gray-400 text-sm">Secondary text on dark background.</p>
  <a href="#" class="text-indigo-400 hover:text-indigo-300">Learn more</a>
</div>

Gradient Text Effect

Make a gradient text effect with bg-gradient-to-r from-* to-* plus bg-clip-text text-transparent. The gradient shows only through the letters — very modern.

<h1 class="text-5xl font-extrabold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
  Gradient Headline
</h1>

Hover Color Changes

Add a hover: variant to change text color on hover — essential for links and buttons. Use transition-colors for a smooth fade, and pair it with focus:.

<a href="#"
   class="text-gray-600 hover:text-indigo-600 focus:text-indigo-600 transition-colors duration-200 font-medium">
  Hover or focus me
</a>

Semantic Color Usage

Pick a semantic palette: one color for brand, red for danger, green for success, yellow for warnings. Used consistently, color teaches users at a glance.

<div class="space-y-2">
  <p class="text-indigo-600 font-medium">Primary action</p>
  <p class="text-red-600 font-medium">Danger / Error</p>
  <p class="text-green-600 font-medium">Success / Confirmed</p>
  <p class="text-yellow-700 font-medium">Warning / Caution</p>
  <p class="text-gray-500 font-medium">Neutral / Disabled</p>
</div>

Text Color in Dark Mode

Add a dark: prefix to any text color and it kicks in during dark mode. One line of HTML serves both your light and dark themes — no duplicate markup.

<p class="text-gray-900 dark:text-gray-100">
  Adapts automatically between themes.
</p>
<p class="text-gray-500 dark:text-gray-400">
  Secondary text adapts too.
</p>

Using Arbitrary Color Values

Need a color outside the palette? Use brackets: text-[#ff5733] for an exact hex. Handy for brand colors, but use sparingly to keep your system consistent.

<!-- Arbitrary color (one-off brand match) -->
<span class="text-[#ff5733] font-bold">Brand Orange</span>

<!-- Better: define in config for reuse -->
/* tailwind.config.js theme.extend.colors.brand: '#ff5733' */
<span class="text-brand font-bold">Brand Orange</span>

Quick Check

Quick check! See how color and opacity landed. 🎨

Lesson Recap

Great! text-{color}-{shade} taps the palette, the slash sets opacity without dimming children, and dark: handles dark mode. Next up: line height and spacing.

الأسئلة الشائعة

هل درس «لون النص وشفافيته» مجاني؟

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

ماذا ستتعلم في «لون النص وشفافيته»؟

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

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

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

كم من الوقت يستغرق درس «لون النص وشفافيته»؟

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

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

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

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

  1. حجم الخط وسمكه
  2. لون النص وشفافيته
  3. ارتفاع السطر وتباعد الأحرف
  4. محاذاة النص وتزيينه
← العودة إلى Tailwind CSS Academy