Tailwind CSSBeginner
Typography (text, font)
Tailwind-এ text size, font weight, line height, letter spacing, text alignment — টাইপোগ্রাফি সম্পূর্ণ বাংলায়।
12টি অংশবাংলা ভাষায়
Tailwind-এ typography utilities দিয়ে font size, weight, alignment, line-height এবং আরও অনেক কিছু নিয়ন্ত্রণ করা যায়।
Font Size
<p class="text-xs">Extra small (12px)</p>
<p class="text-sm">Small (14px)</p>
<p class="text-base">Base (16px)</p>
<p class="text-lg">Large (18px)</p>
<p class="text-xl">Extra large (20px)</p>
<p class="text-2xl">2X large (24px)</p>
<p class="text-3xl">3X large (30px)</p>
<p class="text-4xl">4X large (36px)</p>Font Weight
<p class="font-thin">Thin (100)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">Extra Bold (800)</p>Text Alignment
<p class="text-left">বামে alignment</p>
<p class="text-center">কেন্দ্রে alignment</p>
<p class="text-right">ডানে alignment</p>Line Height & Letter Spacing
<p class="leading-tight">সরু line height</p>
<p class="leading-relaxed">আরামদায়ক line height</p>
<p class="tracking-tight">সরু letter spacing</p>
<p class="tracking-wide">চওড়া letter spacing</p>Text Decoration & Transform
<p class="underline">Underline</p>
<p class="line-through">Strikethrough</p>
<p class="uppercase">UPPERCASE</p>
<p class="lowercase">lowercase</p>
<p class="capitalize">capitalize each word</p>Responsive Typography
বড় স্ক্রিনে বড় font, ছোট স্ক্রিনে ছোট font — text-sm md:text-base lg:text-lg এইভাবে responsive করুন।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।