Tailwind basic background និង shadow

យើងរៀនមានដូចជា Background Classes, Gradients, shadow និង Mix Blend

Background Classes

<div 
        class="w-64 h-60 bg-no-repeat bg-cover"
        style="background-image: url('./kep.jpg');">
        ខេត្តកែប
</div>

Gradients

bg-gradient-to-r from-emerald-200 to-emerald-800

<div class="h-10 bg-gradient-to-r from-emerald-200 to-blue-800">
    bg-gradient-to-r from-emerald-200 to-emerald-800
</div>

to-r (r stand for right) ធ្វើពីខាងស្តាំទៅ

Shadow

shadow-sm

<div class="w-15 mt-4 shadow-sm">
    shadow-sm
</div>

shadow-md

<div class="w-15 mt-4 shadow-md">
    shadow-md
</div>

shadow-lg

<div class="w-15 mt-4 shadow-lg">
    shadow-lg
</div>

shadow-xl

<div class="w-15 mt-4 shadow-xl">
    shadow-xl
</div>

shadow-xl shadow-blue-50

<div class="w-15 mt-4 shadow-xl shadow-blue-50">
    shadow-xl shadow-blue-50
</div>

shadow-2xl shadow-inner

<div class="w-15 mt-4 shadow-xl shadow-inner">
    shadow-2xl shadow-inner
</div>

Mix Blend

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="flex justify-center -space-x-20">
    <div class="mix-blend-multiply bg-emerald-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="mix-blend-multiply bg-blue-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>