ETHIOCODE · LESSON 21 · TAILWIND CSS

UTILITY-FIRST CSS FRAMEWORK

Tailwind CSS Utility-First! 🎨 No Custom CSS · Class-based Styling · Rapid Development

CSS ን HTML ውስጥ ቀጥታ! class ጨምር — style ተሰራ! ⚡
Add classes directly in HTML — no separate CSS files needed! Build beautiful UIs faster than ever!

❌ TRADITIONAL CSS

.btn { padding: 8px 16px;

background: blue; }

✅ TAILWIND

<button class=

"py-2 px-4 bg-blue-500">

Created by @AppMinds_ET

01🎨

Tailwind ምንድን ነው?// Utility-First CSS

Tailwind CSS = ቀዘቀዙ CSS utility classes! p-4, bg-blue-500, flex — ሁሉም ቀዘቀዙ CSS class ናቸው! ዜሮ custom CSS! HTML ውስጥ class ብቻ ጨምር!
Tailwind = hundreds of tiny pre-built CSS classes. Instead of writing CSS, you combine classes. No naming headaches, no style sheets!

❌ Traditional CSS — ለብቻ CSS file

/* style.css */
.card {
  padding: 16px;
  background: #1e293b;
  border-radius: 12px;
  box-shadow: 0 4px 6px...;
  display: flex;
}

/* HTML */
<div class="card">

⟶

Tailwind

✅ Tailwind — HTML ውስጥ ቀጥታ!

/* CSS file አያስፈልግም! */

<div class="
  p-4
  bg-slate-800
  rounded-xl
  shadow-lg
  flex
">

✅ Done! ቀዝቃዛ ፈጣን!

02🗂️

Utility Categories// All Class Groups

Tailwind ውስጥ ሁሉም CSS properties class ሆነው አሉ! Spacing, Colors, Typography, Flexbox, Grid, Borders ሁሉ!
Every CSS property you know has a Tailwind class equivalent — just combine them in your HTML!

📐

Spacing

p-4 m-8 px-2 py-6

Padding & Margin

🎨

Colors

bg-blue-500 text-red-300

Background & Text

✍️

Typography

text-xl font-bold

Font size, weight

📦

Flexbox

flex justify-center

Layout & Alignment

🔲

Grid

grid grid-cols-3

Grid layout

🔳

Borders

border rounded-xl

Border & Radius

💫

Effects

shadow-lg opacity-50

Shadow & Opacity

📱

Responsive

md:flex lg:hidden

Breakpoint prefix

🖱️

States

hover:bg-blue dark:text

Hover, focus, dark

⚡

Transitions

transition duration-300

Animation & Motion

03⚡

ዋና Classes// Most Used

📐 Spacing — p (padding) & m (margin):
ቁጥሩ = 4px multiplier! p-1=4px, p-4=16px, p-8=32px

p-1

4px

p-2

8px

p-4

16px

p-6

24px

p-8

32px

p-12

48px

p-4 = padding: 16px px-4 = padding: 0 16px py-2 = padding: 8px 0 mt-4 = margin-top: 16px mx-auto = margin: 0 auto

tailwind-examples.html — ዋና Classes

<!-- ── Typography ─────────────────────────────── -->
<h1 class="text-4xl font-bold text-white">ርዕስ</h1>
<p  class="text-base text-gray-400 leading-relaxed">ጽሑፍ</p>

<!-- ── Colors ──────────────────────────────────── -->
<div class="bg-blue-500 text-white">Blue card</div>
<div class="bg-slate-900 text-cyan-400">Dark</div>

<!-- ── Flexbox ──────────────────────────────────── -->
<div class="flex items-center justify-between gap-4">
  <span>ግራ / Left</span>
  <span>ቀኝ / Right</span>
</div>

<!-- ── Card Component ───────────────────────────── -->
<div class="
  bg-slate-800 rounded-2xl p-6
  border border-slate-700
  shadow-xl hover:shadow-cyan-500/20
  transition-all duration-300
  hover:-translate-y-1
">
  <h3 class="text-xl font-bold text-white mb-2">Card Title</h3>
  <p  class="text-slate-400 text-sm">Content here...</p>
</div>

<!-- ── Button ────────────────────────────────────── -->
<button class="
  px-6 py-3 bg-cyan-500 text-black
  rounded-full font-bold text-sm
  hover:bg-cyan-400 active:scale-95
  transition-all duration-200
">
  ቁልፍ / Button
</button>

<!-- ── Responsive ────────────────────────────────── -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Mobile: 1col | Tablet: 2col | Desktop: 3col -->
</div>

04📱

Responsive Design// Mobile-First Breakpoints

Tailwind Mobile-First ነው! prefix ሳይጻፍ = ሁሉም screens | md: = tablet ላይ ብቻ | lg: = desktop ላይ ብቻ!
Mobile-first: write base styles for mobile, then use prefixes to override on larger screens. Simple!

PREFIX	BREAKPOINT	MIN-WIDTH	ምሳሌ	ስለ ምን?
(none)	All screens	0px	text-sm	Mobile ጀምሮ ሁሉም
sm:	Small	640px	sm:text-base	ትንሽ tablet+
md:	Medium	768px	md:flex	Tablet+
lg:	Large	1024px	lg:grid-cols-3	Desktop+
xl:	X-Large	1280px	xl:text-6xl	Large desktop
2xl:	2X-Large	1536px	2xl:max-w-7xl	Ultra wide

05🎮

Live Tailwind Playground!// 3 Interactive Tools

3 Interactive demos! Card Builder → classes ቀይር UI ይቀያየራል | Class Decoder → class ምን CSS እንደሆነ | Quick Quiz!
Build cards visually, decode any Tailwind class to CSS, and test your knowledge!

🎨 Tailwind Playground

v3.4 CDN

🃏 Card Builder

🔍 Class Decoder

🎯 Quick Quiz

BACKGROUND COLOR

PADDING

BORDER RADIUS

SHADOW

TEXT COLOR

BORDER

EthioCode Card

Tailwind classes ቀይር → card ይቀያየራሃል!

@AppMinds_ET

← ቀይር

Tailwind class ጻፍ → ምን CSS እንደሆነ ያሳያሃል! Space ለይቶ ብዙ classes ጻፍ!
Enter any Tailwind classes to see their CSS equivalents!

← Classes ጻፍ → CSS ይታያሃል

06🌙

Dark Mode & Hover States// dark: hover: focus:

states.html — Hover, Focus, Dark Mode

<!-- ── Hover State ─────────────────────────────── -->
<button class="
  bg-blue-500           hover:bg-blue-600
  text-white
  px-4 py-2 rounded-lg
  transition-colors duration-200
  hover:shadow-lg       hover:scale-105
  active:scale-95
">Hover me!</button>

<!-- ── Focus State (form inputs) ─────────────── -->
<input class="
  border border-gray-300
  focus:border-blue-500
  focus:ring-2 focus:ring-blue-200
  outline-none rounded-lg p-3
"/>

<!-- ── Dark Mode ────────────────────────────────── -->
<div class="
  bg-white          dark:bg-gray-900
  text-gray-900     dark:text-white
  border-gray-200   dark:border-gray-700
">
  Light ወይም Dark mode ሁለቱም OK!
</div>

<!-- ── Group hover ──────────────────────────────── -->
<div class="group cursor-pointer">
  <h3 class="group-hover:text-blue-500 transition">
    Card title — hover parent!
  </h3>
</div>

07📌

ዋና ዋና ነጥቦች// Key Takeaways

🎨 Tailwind = Utility-First CSS Framework

Custom CSS file አያስፈልግም! HTML ውስጥ class ብቻ ጨምር — bg-blue-500 p-4 rounded-xl flex
Add pre-built utility classes directly in HTML. No more switching between HTML and CSS files!

📐 Spacing System — 1 unit = 4px

p-1=4px | p-4=16px | p-8=32px — consistent spacing everywhere!
The 4px base unit creates consistent, harmonious spacing throughout your design.

🎨 Colors — name-shade (50-950)

bg-blue-500 | text-cyan-400 | border-slate-700 — 22 colors × 11 shades!
Every color has 11 shades from 50 (lightest) to 950 (darkest). Mix and match!

📱 Responsive — Mobile First + Prefixes

grid-cols-1 md:grid-cols-2 lg:grid-cols-3 — Mobile=1, Tablet=2, Desktop=3!
Mobile-first by default. Add sm: md: lg: xl: prefixes to override on larger screens.

🖱️ States — hover: focus: dark: active:

hover:bg-blue-600 dark:bg-gray-900 focus:ring-2 — ሁሉም states class prefix!
Modifier prefixes handle all interactive states. No JavaScript needed for hover effects!

08🎯

Final Quiz// ምን ተማርን?

❓ Tailwind ውስጥ p-4 ምን CSS property ነው?

What CSS does the Tailwind class "p-4" generate?

Apadding: 4px

Bpadding: 40px

Cpadding: 16px ✅

Dpadding: 4rem

🎨 ክፍል 21 — Tailwind!

አስደናቂ! Tailwind CSS ተማርን — ቆንጆ UI ፈጥኖ ለመስራት! 🎉

ቀጣይ: Prisma & Database ORM 🗄️

🌐 ethiocodesoftselect.netlify.app

✈ @EthioCodeSoftSelect

ቻናሉን ክፈቱ → Join 🚀

✍️ Created by@AppMinds_ET