| Property | Abbreviation | Sample Code |
|---|---|---|
| Padding | p |
<div class="p-4 p-lg-8 p-xl-12"> |
| Padding Top | pt |
<div class="pt-4 pt-md-6 pt-lg-8"> |
| Padding Bottom | pb |
<div class="pb-4 pb-md-6 pb-lg-8"> |
| Padding Left | pl |
<div class="pl-2 pl-sm-4 pl-lg-6"> |
| Padding Right | pr |
<div class="pr-2 pr-sm-4 pr-lg-6"> |
| Margin | m |
<div class="m-2 m-md-4 m-lg-8"> |
| Margin Top | mt |
<div class="mt-4 mt-sm-6 mt-md-8"> |
| Margin Bottom | mb |
<div class="mb-4 mb-sm-6 mb-md-8"> |
| Margin Left | ml |
<div class="ml-2 ml-md-4 ml-xl-6"> |
| Margin Right | mr |
<div class="mr-2 mr-md-4 mr-xl-6"> |
| Text Color | text |
<div class="text-red-500 text-lg
text-center">
|
| Background Color | bg |
<div class="bg-blue-500 bg-opacity-75
bg-no-repeat">
|
| Font Size | text |
<div class="text-sm text-lg md:text-2xl">
|
| Font Weight | font |
<div class="font-normal font-bold
font-extrabold">
|
| Width | w |
<div class="w-full w-1/2 w-1/4"> |
| Height | h |
<div class="h-32 h-48 h-64"> |
| Display | flex |
<div class="flex flex-wrap justify-between">
|
| Flex Direction | flex |
<div class="flex flex-row flex-col
lg:flex-row">
|
| Flex Wrap | flex |
<div class="flex flex-wrap flex-nowrap">
|
| Justify Content | justify |
<div class="justify-start justify-between
justify-center">
|
| Align Items | items |
<div class="items-start items-center
items-end">
|
| Align Self | self |
<div class="self-start self-center self-end">
|
| Border | border |
<div class="border border-2 border-dashed">
|
| Border Color | border |
<div class="border-red-500 border-green-600
border-blue-300">
|
| Border Radius | rounded |
<div class="rounded-sm rounded-md
rounded-full">
|
| Box Shadow | shadow |
<div class="shadow shadow-md shadow-lg">
|
| Opacity | opacity |
<div class="opacity-50 opacity-75
opacity-100">
|
| Z-Index | z |
<div class="z-10 z-20 z-50"> |
| Overflow | overflow |
<div class="overflow-auto overflow-hidden
overflow-scroll">
|
| Position | absolute |
<div class="absolute top-0 right-0">
|
| Top | top |
<div class="top-0 top-1/4 top-1/2">
|
| Left | left |
<div class="left-0 left-1/4 left-1/2">
|
| Bottom | bottom |
<div class="bottom-0 bottom-1/4 bottom-1/2">
|
| Right | right |
<div class="right-0 right-1/4 right-1/2">
|
| Cursor | cursor |
<div class="cursor-pointer cursor-default
cursor-wait">
|
| Display Grid | grid |
<div class="grid grid-cols-2 grid-cols-4
gap-4">
|
| Grid Columns | grid-cols |
<div class="grid-cols-2 grid-cols-4
md:grid-cols-6">
|
| Grid Rows | grid-rows |
<div class="grid-rows-2 grid-rows-4
grid-rows-6">
|
| Gap | gap |
<div class="gap-2 gap-4 gap-8"> |
| Place Items | place-items |
<div class="place-items-center
place-items-end">
|
| Max Width | max-w |
<div class="max-w-xs max-w-sm max-w-full">
|
| Min Width | min-w |
<div class="min-w-0 min-w-full"> |
| Max Height | max-h |
<div class="max-h-48 max-h-screen">
|
| Min Height | min-h |
<div class="min-h-screen min-h-0"> |
| Background Gradient | bg-gradient |
<div class="bg-gradient-to-r from-blue-400
to-green-300">
|
| Ring | ring |
<div class="ring-2 ring-4 ring-offset-2">
|
| Ring Color | ring |
<div class="ring-red-500 ring-blue-400">
|
| Transition | transition |
<div class="transition transition-opacity
duration-300">
|
| Hover Text Color | hover:text |
<div class="hover:text-red-500
hover:text-blue-600">
|
| Focus Border Color | focus:border |
<input class="focus:border-blue-500
focus:border-green-500">
|
| Font Style | italic |
<div class="italic not-italic"> |
| Line Height | leading |
<div class="leading-none leading-loose
leading-normal">
|
| Letter Spacing | tracking |
<div class="tracking-tight tracking-wide">
|
| Text Align | text |
<div class="text-left text-center
text-right">
|
| Visibility | visible |
<div class="visible invisible"> |
| List Style | list |
<ul class="list-disc list-decimal">
|
| Flex Grow | flex-grow |
<div class="flex-grow flex-grow-0
flex-grow-1">
|
| Object Fit | object |
<img class="object-contain object-cover">
|
| Background Repeat | bg |
<div class="bg-repeat bg-no-repeat
bg-repeat-x">
|
| Background Size | bg |
<div class="bg-cover bg-contain bg-auto">
|
| Outline | outline |
<button class="outline-none outline-white">
|
| Grid Auto Flow | grid-flow |
<div class="grid-flow-row grid-flow-col">
|
| Text Decoration | underline |
<div class="underline line-through
no-underline">
|
| Border Style | border |
<div class="border-dashed border-dotted
border-solid">
|
| Divide X | divide-x |
<div class="divide-x divide-x-4 divide-x-8">
|
| Resize | resize |
<textarea class="resize-none resize-y
resize-x">
|
| Scroll Snap Type | snap |
<div class="snap-start snap-end snap-center">
|
| Select All | select |
<div class="select-none select-all">
|
| Stroke | stroke |
<svg class="stroke-current stroke-2">
|
| Aspect Ratio | aspect |
<div class="aspect-w-16 aspect-h-9
aspect-w-4">
|
| Transform Scale | scale |
<div class="scale-90 scale-100 scale-125">
|
| Transform Rotate | rotate |
<div class="rotate-45 rotate-90 rotate-180">
|
| Translate | translate |
<div class="translate-x-4 translate-y-8
translate-x-1/2">
|
Here’s a mapping table for the additional Tailwind abbreviations
like md, lg, and xl, and
their descriptions:
| Abbreviation | Description |
|---|---|
sm |
Small screens (min-width: 640px) |
md |
Medium screens (min-width: 768px) |
lg |
Large screens (min-width: 1024px) |
xl |
Extra-large screens (min-width: 1280px) |
2xl |
2X-large screens (min-width: 1536px) |
hover |
Hover state pseudo-class |
focus |
Focus state pseudo-class |
active |
Active state pseudo-class |
disabled |
Disabled state pseudo-class |
dark |
Dark mode variant |
first |
First-child pseudo-class |
last |
Last-child pseudo-class |
even |
Even-child pseudo-class |
odd |
Odd-child pseudo-class |
group-hover |
Hover state on a parent element with class
group
|
group-focus |
Focus state on a parent element with class
group
|
motion-safe |
Motion-safe media query |
motion-reduce |
Motion-reduce media query |
print |
Print media query |
These abbreviations are mainly used to apply styles conditionally based on screen size, interaction state, or media queries.
Here’s a mapping table for the Tailwind value numbers like
1/2, h-48, and ring-2, and
their meanings:
| Value | Description |
|---|---|
1/2 |
50% of the parent width or height |
1/3 |
33.33% of the parent width or height |
1/4 |
25% of the parent width or height |
2/3 |
66.66% of the parent width or height |
3/4 |
75% of the parent width or height |
full |
100% of the parent width or height |
h-48 |
Height of 12rem (192px) |
h-64 |
Height of 16rem (256px) |
h-screen |
100% of the viewport height |
w-48 |
Width of 12rem (192px) |
w-64 |
Width of 16rem (256px) |
w-screen |
100% of the viewport width |
p-1 |
Padding of 0.25rem (4px) |
p-2 |
Padding of 0.5rem (8px) |
p-4 |
Padding of 1rem (16px) |
p-8 |
Padding of 2rem (32px) |
m-1 |
Margin of 0.25rem (4px) |
m-2 |
Margin of 0.5rem (8px) |
m-4 |
Margin of 1rem (16px) |
m-8 |
Margin of 2rem (32px) |
ring-2 |
Ring width of 2px |
ring-4 |
Ring width of 4px |
ring-offset-2 |
Ring offset of 2px |
opacity-50 |
50% opacity |
opacity-75 |
75% opacity |
z-10 |
z-index of 10 |
z-50 |
z-index of 50 |
rounded-sm |
Small border-radius (0.125rem or 2px) |
rounded-md |
Medium border-radius (0.375rem or 6px) |
rounded-lg |
Large border-radius (0.5rem or 8px) |
These numerical values represent various spacing, sizing, opacity, z-index, and border-radius utilities in Tailwind. They are often defined in rems, percentages, or pixels depending on the context of the property.
Komentar
Posting Komentar