
<p class="text-xs dark:text-white">Robotech - Text XS</p>
<p class="text-sm dark:text-white">Robotech - Text SM</p>
<p class="text-base dark:text-white">Robotech - Text Base</p>
<p class="text-lg dark:text-white">Robotech - Text LG</p>
<p class="text-xl dark:text-white">Robotech - Text XL</p>
<p class="text-2xl dark:text-white">Robotech - Text 2XL</p>
<p class="text-3xl dark:text-white">Robotech - Text 3XL</p>
<p class="text-4xl dark:text-white">Robotech - Text 4XL</p>
<p class="text-5xl dark:text-white">Robotech - Text 5XL</p>
<p class="text-6xl dark:text-white">Robotech - Text 6XL</p>

Font Weight

Robotech - Font thin

Robotech - Font Extralight

Robotech - Font Light

Robotech - Font Normal

Robotech - Font Medium

Robotech - Font Semibold

Robotech - Font Bold

Robotech - Font Extrabold

Robotech - Font Black


<p class="font-thin dark:text-white">Robotech - Font thin</p>
<p class="font-extralight dark:text-white">Robotech - Font Extralight</p>
<p class="font-light dark:text-white">Robotech - Font Light</p>
<p class="font-normal dark:text-white">Robotech - Font Normal</p>
<p class="font-medium dark:text-white">Robotech - Font Medium</p>
<p class="font-semibold dark:text-white">Robotech - Font Semibold</p>
<p class="font-bold dark:text-white">Robotech - Font Bold</p>
<p class="font-extrabold dark:text-white">Robotech - Font Extrabold</p>
<p class="font-black dark:text-white">Robotech - Font Black</p>

Text Alignment

Text Left

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

Text Center

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

Text Right

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

                                       
<div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full relative h-full mb-4">
    <div class="border-b border-dashed border-slate-200 dark:border-slate-700 py-3 px-4 dark:text-slate-300/70">
        <h4 class="font-medium">Text Left</h4>
    </div><!--end header-title-->
    <div class="flex-auto p-4">
        <p class="text-base text-slate-500 dark:text-slate-400 mb-2 font-normal inline-block text-left">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
    </div><!--end card-body-->
</div> <!--end card-->
<div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full relative mb-4">
    <div class="border-b border-dashed border-slate-200 dark:border-slate-700 py-3 px-4 dark:text-slate-300/70">
        <h4 class="font-medium">Text Center</h4>
    </div><!--end header-title-->
    <div class="flex-auto p-4">
        <p class="text-base text-slate-500 dark:text-slate-400 mb-2 font-normal inline-block text-center">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
    </div><!--end card-body-->
</div> <!--end card-->
<div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full relative">
    <div class="border-b border-dashed border-slate-200 dark:border-slate-700 py-3 px-4 dark:text-slate-300/70">
        <h4 class="font-medium">Text Right</h4>
    </div><!--end header-title-->
    <div class="flex-auto p-4">
        <p class="text-base text-slate-500 dark:text-slate-400 mb-2 font-normal inline-block text-right">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
    </div><!--end card-body-->
</div> <!--end card-->

Word Options

Text decoration color

I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at My Company, Inc. Outside of work, I like to watch pod-racing and have light-saber fights.

Text Indent

It is a long established fact that a reader will be distracted by the readable content of distracted by the readable content a page when looking at its layout.

Referencing an attribute value


<div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full relative h-full mb-4">
    <div class="border-b border-dashed border-slate-200 dark:border-slate-700 py-3 px-4 dark:text-slate-300/70">
        <h4 class="font-medium">Text decoration color</h4>
    </div><!--end header-title-->
    <div class="flex-auto p-4">
        <p class="dark:text-slate-400">
            I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at
            <a class="underline decoration-sky-500">My Company, Inc</a>.
            Outside of work, I like to <a class="underline decoration-pink-500">watch
            pod-racing</a> and have <a class="underline decoration-indigo-500">light-saber</a> fights.
          </p>
    </div><!--end card-body-->
</div> <!--end card-->
<div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full relative mb-4">
    <div class="border-b border-dashed border-slate-200 dark:border-slate-700 py-3 px-4 dark:text-slate-300/70">
        <h4 class="font-medium">Text Indent</h4>
    </div><!--end header-title-->
    <div class="flex-auto p-4">
        <p class="text-base text-slate-500 dark:text-slate-400 mb-2 font-normal inline-block indent-8">It is a long established fact that a reader will be distracted by the readable content of   distracted by the readable content a page when looking at its layout.</p>
    </div><!--end card-body-->
</div> <!--end card-->
<div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full relative">
    <div class="border-b border-dashed border-slate-200 dark:border-slate-700 py-3 px-4 dark:text-slate-300/70">
        <h4 class="font-medium">Referencing an attribute value</h4>
    </div><!--end header-title-->
    <div class="flex-auto p-4">
        <p before="Hello World" class="before:content-[attr(before)] text-xl text-slate-700 dark:text-slate-400 font-medium inline-block text-right"></p>
    </div><!--end card-body-->
</div> <!--end card-->

Line Height

.leading-noneIt is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal .

.leading-tightIt is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal .

.leading-snugIt is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal .

.leading-normalIt is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal .

.leading-relaxedIt is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal .

.leading-looseIt is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal .


<p class="leading-none dark:text-gray-400 border-b border-dashed border-slate-200 dark:border-slate-700 py-3">
    <span class="font-normal text-blue-700 dark:text-blue-500 block mb-2">.leading-none</span>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal .</p>
<p class="leading-tight dark:text-gray-400  border-b border-dashed border-slate-200 dark:border-slate-700 py-3">
    <span class="font-normal text-blue-700 dark:text-blue-500 block mb-2">.leading-tight</span>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal .</p>
<p class="leading-snug dark:text-gray-400  border-b border-dashed border-slate-200 dark:border-slate-700 py-3">
    <span class="font-normal text-blue-700 dark:text-blue-500 block mb-2">.leading-snug</span>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal .</p>
<p class="leading-normal dark:text-gray-400  border-b border-dashed border-slate-200 dark:border-slate-700 py-3">
    <span class="font-normal text-blue-700 dark:text-blue-500 block mb-2">.leading-normal</span>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal .</p>
<p class="leading-relaxed dark:text-gray-400  border-b border-dashed border-slate-200 dark:border-slate-700 py-3">
    <span class="font-normal text-blue-700 dark:text-blue-500 block mb-2">.leading-relaxed</span>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal .</p>
<p class="leading-loose dark:text-gray-400 py-3">
    <span class="font-normal text-blue-700 dark:text-blue-500 block mb-2">.leading-loose</span>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal .</p>

Text Decoration

please read our terms and services


    <p class="underline dark:text-gray-400">please read our terms and services</p>
    <p class="underline dark:text-gray-400 decoration-4">please read our terms and services</p>
    <p class="underline underline-offset-2 dark:text-gray-400 decoration-wavy">please read our terms and services</p>
    <p class="line-through dark:text-gray-400">please read our terms and services</p>
    <p class="overline  dark:text-gray-400">please read our terms and services</p>

Theme Colors

Text primary 500

Text red 500

Text orange 500

Text amber 500

Text yellow 500

Text lime 500

Text green 500

Text emerald 500

Text teal 500

Text cyan 500

Text sky 500

Text blue 500

Text indigo 500

Text violet 500

Text purple 500

Text fuchsia 500

Text pink 500

Text rose 500


<p class="text-primary-500">Text primary 500</p>
<p class="text-red-500">Text red 500</p>
<p class="text-orange-500">Text orange 500</p>
<p class="text-amber-500">Text amber 500</p>
<p class="text-yellow-500">Text yellow 500</p>
<p class="text-lime-500">Text lime 500</p>
<p class="text-green-500">Text green 500</p>
<p class="text-emerald-500">Text emerald 500</p>
<p class="text-teal-500">Text teal 500</p>
<p class="text-cyan-500">Text cyan 500</p>
<p class="text-sky-500">Text sky 500</p>
<p class="text-blue-500">Text blue 500</p>
<p class="text-indigo-500">Text indigo 500</p>
<p class="text-violet-500">Text violet 500</p>
<p class="text-purple-500">Text purple 500</p>
<p class="text-fuchsia-500">Text fuchsia 500</p>
<p class="text-pink-500">Text pink 500</p>
<p class="text-rose-500">Text rose 500</p>

Typography

Text Size

Font Weight

Text Alignment

Text Left

Text Center

Text Right

Word Options

Text decoration color

Text Indent

Referencing an attribute value

Line Height

Text Decoration

Theme Colors