Tailwind basic typography

រៀងសិក្សា typograhy ដែលមានដូចជា font-size,font-weight, Letter spacing,Text Alignment, Text Decoratoin - decoration style , Underline offset,Text Transform, Font family និងជាមួយ google font

Font size

<div class="container mx-auto">
    <h1 class="text-xl font-bold">Font size :</h1>
    <div class="text-xs">text-xs (12px)</div>
    <div class="text-sm">text-sm (14px)</div>
    <div class="text-base">text-base (16px)</div>
    <div class="text-lg">text-lg (18px)</div>
    <div class="text-xl">text-xl (20px)</div>
    <div class="text-2xl">text-2xl (24px)</div>
    <div class="text-3xl"> text-3xl (3xl-2xl = 1xl = 6px+24px => 30px) </div>
</div>

Font weight

<div class="container mx-auto">
    <h1 class="text-xl font-bold">Font Weight :</h1>
    <div class="font-light">font-light</div>
    <div class="font-normal">font-normal</div>
    <div class="font-medium">font-medium</div>
    <div class="font-semibold">font-semibold</div>
    <div class="font-bold">font-bold</div>
</div>

Letter spacing

<div class="container mx-auto">
    <h1 class="text-xl font-bold">Letter spacing : </h1>
    <div class="tracking-tight">tracking-tight</div>
    <div class="tracking-normal">tracking-normal</div>
    <div class="tracking-wide">tracking-wide</div>
</div>

Text Alignment

<!-- Text Alignment -->
<div class="container mx-auto">
    <h1 class="text-xl font-bold">Text alignment :</h1>
    <div class="text-left">text-left</div>
    <div class="text-center">text-center</div>
    <div class="text-right">text-right</div>
</div>
<br><hr>

Text Decoratoin & decoration style

<!-- Text Decoratoin & decoration style -->
<div class="container mx-auto">
    <h1 class="text-xl font-bold">Text Decoration :</h1>
    <div class="underline decoration-4 decoration-blue-200">
        underline decoration-4 decoration-blue-200
    </div>
    <div class="underline decoration-double"> underline decoration-double</div>
    <div class="underline decoration-dotted">underline decoration-dotted</div>
    <div class="underline decoration-dashed">underline decoration-dashed</div>
    <div class="underline decoration-wavy">underline decoration-wavy</div> 
</div>
<br><hr>

Underline offset

<!-- Underline offset -->
<div class="container mx-auto">
    <h1 class="text-xl font-bold">Undeline offset :</h1>
    <div class="underline decoration-2 decoration-pink-200 underline-offset-8">
        underline decoration-2 decoration-pink-200 underline-offset-8
    </div>
</div>
<br><hr>

Text Transform

<!-- Text Transform -->
<div class="container mx-auto">
    <h1 class="text-xl font-bold">Text transform :</h1>
    <p class="normal-case">normal-case</p>
    <p class="uppercase">uppercase</p>
    <p class="lowercase">Lowercase</p>
    <p class="capitalize">capitalize</p>
</div>

Font family

<div class="container mx-auto">
        <h1>Font-Family</h1>
        <div class="font-sans">Style font is  font-sans</div>
        <div class="font-serif">Style font is font-serif</div>
        <div class="font-mono">Style font is font-mono</div>
    </div>

Font family ជាមួយ googel font

config

<script>
        tailwind.config = {
            theme: {
                    fontFamily: {
                    'sans': ['ui-sans-serif', 'system-ui'],
                    'serif': ['ui-serif', 'Georgia'],
                    'mono': ['Playwrite NZ', 'SFMono-Regular'],
                    'lobster':["Lobster Two", 'sans-serif']
                    }
                }
        }
     </script>

copy library google font ទៅដាក់នៅ head tag

<div class="container mx-auto">
        <h1 class="text-xl font-bold">Font-Family :</h1>
        <div class="font-sans">Style font is  font-sans</div>
        <div class="font-serif">Style font is font-serif</div>
        <div class="font-mono">Style font is font-mono</div>
        <div class="font-lobster">Test font stye googefont</div>
    </div>