Lesson 3 / الدرس 3

The utility idea, and the component idea / فكرة الأدوات وفكرة المكوّنات

Before any class names, the two models. One names things you recognise; the other names properties you already know. Every later lesson is these two ideas applied to one topic.

قبل أي أسماء أصناف، النموذجان. أحدهما يسمّي أشياء تعرفها؛ والآخر يسمّي خصائص تعرفها أصلًا. وكل درس لاحق هو هاتان الفكرتان مطبَّقتين على موضوع واحد.

A component class is named after a thing on the page: card, navbar, alert. One class, many declarations, and the framework decided all of them. A utility class is named after one declaration: p-4 is padding, flex is display. One class, one job, and you decide the combination.

صنف المكوّن مسمّى باسم شيء على الصفحة: card وnavbar وalert. صنف واحد وإعلانات كثيرة، والإطار قرّرها كلها. وصنف الأداة مسمّى باسم إعلان واحد: p-4 حشو، وflex عرض. صنف واحد وعمل واحد، وأنت تقرر التركيب.

UTILITY  (Tailwind)
  .p-4     { padding: 1rem; }
  .flex    { display: flex; }
  .gap-2   { gap: .5rem; }

COMPONENT  (Bootstrap)
  .card    { position: relative; display: flex; flex-direction: column;
             min-width: 0; word-wrap: break-word; background-color: #fff;
             border: 1px solid rgba(0,0,0,.175); border-radius: .375rem; }

Both are just CSS. The difference is how much of it one class carries, and therefore how much you can change without leaving the framework. Run the demonstration to see the same panel built each way.

Reading a utility name

Class	Reads as	CSS
p-4	padding, step 4	padding: 1rem
px-4	padding, x axis	padding-left and -right
mt-2	margin, top, step 2	margin-top: .5rem
text-lg	text, large	font-size: 1.125rem
bg-slate-100	background, slate, shade 100	background-color
md:flex	from medium up, flex	a media query
hover:bg-blue-600	on hover, background blue 600	a :hover rule

Once the pattern lands — property, then axis or side, then a step on a scale — most of Tailwind reads without being memorised. The last two rows are the parts plain CSS cannot do in an attribute at all.

The objection, and the answer

The first reaction to a utility class is that it looks like inline styles with extra steps, and that separating content from presentation was the whole point. It is a fair objection with three real answers: utilities come from a fixed scale so you cannot invent a seventh spacing value by accident, they carry things inline styles cannot — hover, focus, breakpoints — and repetition is solved by extracting a component in your templates rather than in your CSS, which lesson 18 covers.

ولا تخلط الإطارين في صفحة واحدة. فكلاهما يعرّف أصنافًا بالأسماء نفسها — border وd-flex في مقابل flex وكثير من أدوات الألوان — وأيّ ملف تنسيق يُحمّل ثانيًا يفوز بصمت. والعرض أعلاه يحمّل الاثنين عمدًا ليُظهرهما جنبًا إلى جنب، وهو الموضع الوحيد في هذه الدورة الذي يفعل ذلك.

Bootstrap has utilities too, and this is worth knowing early: d-flex, mt-3, text-center are Bootstrap utility classes, and modern Bootstrap has a lot of them. The difference between the two frameworks is one of emphasis rather than a wall — Bootstrap leads with components and offers utilities, Tailwind offers only utilities.

ولـBootstrap أدوات أيضًا، وهذا يستحق المعرفة مبكرًا: فـd-flex وmt-3 وtext-center أصناف أدوات في Bootstrap، ولدى Bootstrap الحديث كثير منها. والفرق بين الإطارين فرق تركيز لا جدار — فـBootstrap يتصدّر بالمكوّنات ويعرض أدوات، وTailwind لا يعرض إلا أدوات.

Try it live / جرّب بنفسك

<h1>Decoding class names</h1>

<table>
  <tr><th>Class</th><th>My guess</th><th>Real CSS</th><th>Bootstrap</th></tr>
  <tr><td><code>…</code></td><td>…</td><td><code>…</code></td><td>…</td></tr>
</table>

<h2>Where they genuinely differ</h2>
<p>…</p>

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #cbd5e1; padding: .5rem .8rem; text-align: start; }
</style>

Preview / المعاينة

Check yourself / اختبر نفسك

1. What does a utility class do?

2. Why is a utility class not simply an inline style?

3. What happens if you load both frameworks on one page?

Your task / مهمتك

Take five Tailwind class names you have not seen before from the documentation, and write a page decoding each one: what you think it means from its name alone, then the CSS it actually produces. Then write the same five styles as Bootstrap would express them, noting where Bootstrap has no equivalent utility and you would need a component or your own CSS.

خذ خمسة أسماء أصناف من Tailwind لم ترها من قبل من التوثيق، واكتب صفحة تفكّ كل واحد: ما تظنه يعني من اسمه وحده، ثم CSS التي ينتجها فعلًا. ثم اكتب التنسيقات الخمسة نفسها كما سيعبّر عنها Bootstrap، مشيرًا إلى حيث لا يملك Bootstrap أداة مكافئة وستحتاج مكوّنًا أو CSS خاصتك.

Five classes you had not met before خمسة أصناف لم تقابلها من قبل
Your guess from the name, then the real CSS تخمينك من الاسم، ثم CSS الحقيقية
The Bootstrap equivalent, or a note that there is none المكافئ في Bootstrap، أو ملاحظة بعدم وجوده
One case where the two genuinely differ حالة واحدة يختلف فيها الاثنان فعلًا