Tailwind CSSBeginner

Utility Classes কী এবং কীভাবে পড়তে হয়

Tailwind utility class naming convention, prefix system এবং class reading strategy — বাংলায়।

12টি অংশবাংলা ভাষায়

Tailwind-এ প্রতিটি utility class একটি CSS property-কে represent করে। এদের naming convention বোঝা গুরুত্বপূর্ণ।

Class Naming Pattern

Tailwind class-গুলো সাধারণত এই pattern অনুসরণ করে:

prefix:property-name

উদাহরণ:
bg-blue-500     → background color: blue, shade 500
text-lg         → font-size: large
p-4             → padding: 1rem (16px)
rounded-lg      → border-radius: large
shadow-md       → box-shadow: medium

Utility Categories

ক্যাটাগরি	উদাহরণ	কাজ
Spacing	p-4, m-2, gap-4	Padding, margin, gap
Colors	bg-blue-500, text-red-600	Background, text color
Typography	text-lg, font-bold	Font size, weight
Layout	flex, grid, block	Display, layout
Sizing	w-full, h-8	Width, height
Border	rounded-lg, border	Border radius, border
Shadow	shadow-md	Box shadow

Class কীভাবে পড়বেন

rounded-lg bg-blue-600 px-4 py-2 text-white
  │            │          │      │      │
  │            │          │      │      └── text color: white
  │            │          │      └── padding-y: 8px
  │            │          └── padding-x: 16px
  │            └── background: blue-600
  └── border-radius: large

Arbitrary Values

Tailwind-এ নির্দিষ্ট মান দিতে চাইলে bracket syntax ব্যবহার করুন।

<!-- Custom values -->
<div class="w-[300px] h-[200px] bg-[#1da1f2]">
  Custom size and color
</div>

<!-- Custom font size -->
<p class="text-[18px]">Custom font size</p>

Tailwind Docs সবচেয়ে ভালো সাথী

প্রতিটি utility class-এর documentation পড়ুন tailwindcss.com। সেখানে সব class-এর তালিকা ও উদাহরণ পাবেন।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।