تایپوگرافی
مثالهای عنوان
text-xs (12px)
text-sm (14px)
text-base (16px)
text-lg (18px)
text-xl (20px)
text-2xl (24px)
text-3xl (30px)
text-4xl (36px)
text-5xl (48px)
text-6xl (60px)
text-7xl (72px)
text-8xl (96px)
text-9xl(128px)
<div class="space-y-4">
<h1 class="text-xs">text-xs <span class="text-base">(12px)</span></h1>
<h1 class="text-sm">text-sm <span class="text-base">(14px)</span></h1>
<h1 class="text-base">text-base (16px)</h1>
<h1 class="text-lg">text-lg <span class="text-base">(18px)</span></h1>
<h1 class="text-xl">text-xl <span class="text-base">(20px)</span></h1>
<h1 class="text-2xl">text-2xl <span class="text-base">(24px)</span></h1>
<h1 class="text-3xl">text-3xl <span class="text-base">(30px)</span></h1>
<h1 class="text-4xl">text-4xl <span class="text-base">(36px)</span></h1>
<h1 class="text-5xl">text-5xl <span class="text-base">(48px)</span></h1>
</div>
<div class="space-y-4">
<h1 class="text-6xl">text-6xl <span class="text-base">(60px)</span></h1>
<h1 class="text-7xl">text-7xl <span class="text-base"> (72px)</span></h1>
<h1 class="text-8xl">text-8xl <span class="text-base">(96px)</span></h1>
<h1 class="text-9xl">text-9xl<span class="text-base">(128px)</span></h1>
</div>
مثالهای متن رنگارنگ
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
<h1 class="text-primary text-lg">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</h1>
<h1 class="text-secondary text-lg">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</h1>
<h1 class="text-success text-lg">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</h1>
<h1 class="text-info text-lg">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</h1>
<h1 class="text-danger text-lg">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</h1>
مثالهای متن با گرادیان
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
<p class="text-3xl bg-gradient-to-r from-cyan-500 to-blue-500 bg-clip-text text-transparent">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</p>
<p class="text-3xl bg-gradient-to-l from-primary to-info bg-clip-text font-semibold text-transparent">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</p>
<p class="text-3xl bg-gradient-to-r from-danger to-success bg-clip-text font-semibold text-transparent">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</p>
<p class="text-3xl bg-gradient-to-r from-fuchsia-500 to-pink-500 bg-clip-text font-semibold text-transparent">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</p>
مثالهای متن با شفافیت رنگ
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
<p class="text-3xl bg-gradient-to-r from-cyan-500 to-blue-500 bg-clip-text text-transparent">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</p>
<p class="text-3xl bg-gradient-to-l from-primary to-info bg-clip-text font-semibold text-transparent">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</p>
<p class="text-3xl bg-gradient-to-r from-danger to-success bg-clip-text font-semibold text-transparent">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</p>
<p class="text-3xl bg-gradient-to-r from-fuchsia-500 to-pink-500 bg-clip-text font-semibold text-transparent">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</p>
مثالهای تزئین متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
<p class="text-lg underline">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</p>
<p class="text-lg overline">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</p>
<p class="text-lg line-through">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم </p>
<p class="text-lg no-underline">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم </p>
تزئین متن با رنگ
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
<p class="text-lg underline decoration-primary">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</p>
<p class="text-lg overline decoration-success decoration-2">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</p>
<p class="text-lg line-through decoration-danger decoration-2">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم </p>
<p class="text-lg no-underline">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم </p>
سبک تزئین متن
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم
<p class="text-lg underline decoration-solid">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</p>
<p class="text-lg underline decoration-double">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</p>
<p class="text-lg underline decoration-dotted">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم </p>
<p class="text-lg underline decoration-wavy">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم </p>