Tailwind CSS Cheatsheet

 [Tailwindcss class] 

<p class="text-slate-300">This text is colored!</p>
<p class="text-red-500">This text is colored!</p>
<p class="text-green-400">This text is colored!</p>
<p class="text-blue-700/10">This text is colored and opaque!</p>
        

 <div class="bg-amber-500 h-full">This div has a background color</div> 

<p class="text-sm">This text has it's font size adjusted</p>
<p class="text-base">This text has it's font size adjusted</p>
<p class="text-lg">This text has it's font size adjusted</p>
<p class="text-5xl">This text has it's font size adjusted</p>

<p class="text-left">This text is aligned to the left</p>
<p class="text-center">This text is aligned to the center</p>
<p class="text-right">This text is aligned to the right</p>
      

  <div class="w-52 h-52">
    This div has a width of 52px and a height of 52px
  </div>
  <div class="w-full h-full">
    This div has a width of 100% and a height of 100%
  </div>
  <div class="w-1/3 h-1/3">
    This div has a width of 33.33% and a height of 33.33%
  </div>
        

<p class="p-12">Text with padding</p>
<p class="px-6">Text with padding</p>
<p class="py-4">Text with padding</p>
<p class="pl-6">Text with padding</p>
      

<p class="m-12">Text with margin</p>
<p class="mx-6">Text with margin</p>
<p class="my-4">Text with margin</p>
<p class="ml-6">Text with margin</p>
        

<div class="space-y-parent space-y-6">
  <p>This item is spaced on it's y axis</p>
  <p>This item is spaced on it's y axis</p>
  <p>This item is spaced on it's y axis</p>
  </div>
<div class="space-x-parent flex space-x-6">
  <p>This item is spaced on it's x axis</p>
  <p>This item is spaced on it's x axis</p>
  <p>This item is spaced on it's x axis</p>
  </div>
      

<p class="visible">Visible p tag</p>
<p class="invisible">Invisible p tag</p>
        

<div class="border-4 border-sky-500">This div has a border</div>
<div class="border-l-2 border-sky-500">This div has a left border</div>
        

<div class="border border-teal-500 rounded-md">
  This div has a border radius on all sides
</div>
<div class="border border-teal-500 rounded-t-3xl">
  This div has a border radius on the top left and top right
</div>
<div class="border border-teal-500 rounded-bl-2xl">
  This div has a border radius on the bottom left
</div>
        

<div class="shadow-sm">Shadow small</div>
<div class="shadow-lg">Shadow large</div>
<div class="shadow-inner">Shadow inner</div>
        

<div class="opacity-25">Opacity 25%</div>
<div class="opacity-50">Opacity 50%</div>
<div class="opacity-75">Opacity 75%</div>
<div class="opacity-100">Opacity 100%</div>
        

<button class="border-4 border-blue-500 cursor-pointer">
  Button with a cursor
</button>
<button class="border-4 border-blue-500 cursor-not-allowed">
  Button you cannot click
</button>
        

<button class="border-4 bg-blue-200 transition-all duration-1000 hover:bg-blue-800">
  Button with a transition
</button>
        

<div class="flex">
  <p>This p tag is flexed</p>
  <p>This p tag is flexed</p>
  <p>This p tag is flexed</p>
</div>
        

<div class="flex flex-wrap">
  <p class="pr-6">This p tag is flexed</p>
  <p class="pr-6">This p tag is flexed</p>
  <p class="pr-6">This p tag is flexed</p>
  <p class="pr-6">This p tag is flexed</p>
  <p class="pr-6">This p tag is flexed</p>
  <p class="pr-6">This p tag is flexed</p>
  <p class="pr-6">This p tag is flexed</p>
  <p class="pr-6">This p tag is flexed</p>
  <p class="pr-6">This p tag is flexed</p>
</div>
        

<div class="flex justify-between">
  <p class="pr-6">This p tag is flexed with space between</p>
  <p class="pr-6">This p tag is flexed with space between</p>
</div>
        

<div class="flex justify-around">
  <p>Flexed with space around</p>
  <p>Flexed with space around</p>
  <p>Flexed with space around</p>
</div>
        

<div class="flex flex-wrap gap-5">
  <p>Flexed with gaps</p>
  <p>Flexed with gaps</p>
  <p>Flexed with gaps</p>
  <p>Flexed with gaps</p>
  <p>Flexed with gaps</p>
  <p>Flexed with gaps</p>
  <p>Flexed with gaps</p>
  <p>Flexed with gaps</p>
  <p>Flexed with gaps</p>
</div>

<div class="flex flex-wrap gap-x-8">
  <p>Flexed with gaps</p>
  <p>Flexed with gaps</p>
  <p>Flexed with gaps</p>
  <p>Flexed with gaps</p>
  <p>Flexed with gaps</p>
  <p>Flexed with gaps</p>
  <p>Flexed with gaps</p>
  <p>Flexed with gaps</p>
  <p>Flexed with gaps</p>
</div>
        

 columns-3 

 grid grid-cols-4 grid-rows-2 

 columns-1 md:columns-3 

<div class="relative">
  <div class="absolute right-10 bottom-5"> Absolute div </div>
</div>
        

<div class="relative">
  <p class="border-4 m-6 w-24 text-center cursor-pointer" @click="showFixed = !showFixed"> Click me </p>
  <div class="fixed right-0 top-0 text-3xl w-52 h-52 border-4 border-amber-500" :class="showFixed ? 'visible' : 'invisible'"> Fixed div </div>
</div>
        

<div class="relative">
  <div class="absolute z-1 w-24 h-24 border bg-green-500 left-5 top-5"> zindex 1 </div>
  <div class="absolute z-2 w-24 h-24 border bg-red-500 left-10 top-10"> zindex 2 </div>
  <div class="absolute z-3 w-24 h-24 border bg-blue-500 left-20 top-20"> zindex 3 </div>
</div>
        

<div class="flex flex-col">
  <p>Open the dev console and click each button</p>
  <button class="w-60 cursor-pointer border-4 border-blue-500 pointer-events-auto" @click="clickPointerEventAuto"> Button with pointer events auto </button>
  <button class="w-60 cursor-pointer border-4 border-blue-500 pointer-events-none" @click="clickPointerEventAuto"> Button with pointer events none </button>
</div>