block / inline-block / inline | Display types |
flex / inline-flex | Flexbox |
grid / inline-grid | Grid |
hidden | Display none |
static / relative / absolute / fixed / sticky | Position |
top-0 / right-0 / bottom-0 / left-0 | Position values |
inset-0 / inset-x-0 / inset-y-0 | Inset shorthand |
z-10 / z-20 / z-50 | Z-index |
flex-row / flex-col | Direction |
flex-wrap / flex-nowrap | Wrap |
justify-start / center / end / between / around | Justify content |
items-start / center / end / stretch | Align items |
self-start / center / end | Align self |
flex-1 / flex-auto / flex-none | Flex grow/shrink |
grow / grow-0 | Flex grow |
shrink / shrink-0 | Flex shrink |
grid-cols-1 / grid-cols-2 / grid-cols-12 | Column count |
grid-rows-1 / grid-rows-2 | Row count |
col-span-2 / col-span-full | Column span |
row-span-2 | Row span |
gap-4 / gap-x-4 / gap-y-4 | Gap |
col-start-1 / col-end-3 | Column start/end |
p-4 / px-4 / py-4 | Padding (all/x/y) |
pt-4 / pr-4 / pb-4 / pl-4 | Padding (sides) |
m-4 / mx-4 / my-4 | Margin (all/x/y) |
mt-4 / mr-4 / mb-4 / ml-4 | Margin (sides) |
-m-4 / -mt-4 | Negative margin |
mx-auto | Center horizontally |
space-x-4 / space-y-4 | Space between |
w-4 / w-1/2 / w-full / w-screen | Width |
h-4 / h-1/2 / h-full / h-screen | Height |
min-w-0 / min-w-full | Min width |
max-w-sm / max-w-md / max-w-lg / max-w-xl | Max width |
min-h-0 / min-h-screen | Min height |
max-h-full / max-h-screen | Max height |
size-4 / size-full | Width & height |
font-sans / font-serif / font-mono | Font family |
text-xs / text-sm / text-base / text-lg / text-xl | Font size |
font-thin / font-normal / font-medium / font-bold | Font weight |
italic / not-italic | Font style |
tracking-tight / tracking-normal / tracking-wide | Letter spacing |
leading-tight / leading-normal / leading-loose | Line height |
text-left / text-center / text-right / text-justify | Text align |
text-black / text-white / text-gray-500 | Text color |
underline / line-through / no-underline | Text decoration |
uppercase / lowercase / capitalize | Text transform |
truncate | Truncate text |
line-clamp-2 / line-clamp-3 | Line clamp |
whitespace-nowrap / whitespace-pre | Whitespace |
bg-{color}-{shade} | Background color |
text-{color}-{shade} | Text color |
border-{color}-{shade} | Border color |
bg-slate-100 / bg-slate-500 / bg-slate-900 | Slate scale |
bg-red-500 / bg-blue-500 / bg-green-500 | Primary colors |
bg-transparent | Transparent |
bg-current | Current text color |
bg-cover / bg-contain / bg-auto | Background size |
bg-center / bg-top / bg-bottom | Background position |
bg-repeat / bg-no-repeat / bg-repeat-x | Background repeat |
bg-fixed / bg-local / bg-scroll | Background attachment |
bg-gradient-to-r / bg-gradient-to-b | Gradient direction |
from-blue-500 via-purple-500 to-pink-500 | Gradient colors |
opacity-0 / opacity-50 / opacity-100 | Opacity |
bg-opacity-50 | Background opacity |
text-opacity-75 | Text opacity |
bg-black/50 | Color with opacity |
border / border-2 / border-4 | Border width |
border-t / border-r / border-b / border-l | Border sides |
border-solid / border-dashed / border-dotted | Border style |
rounded / rounded-md / rounded-lg / rounded-full | Border radius |
rounded-t / rounded-r / rounded-b / rounded-l | Radius sides |
divide-x / divide-y | Divide children |
ring-2 / ring-blue-500 | Ring (focus) |
shadow-sm / shadow / shadow-md / shadow-lg / shadow-xl | Box shadow |
shadow-inner | Inner shadow |
shadow-none | No shadow |
blur / blur-sm / blur-lg | Blur filter |
brightness-50 / brightness-150 | Brightness |
contrast-50 / contrast-150 | Contrast |
grayscale / sepia / invert | Color filters |
sm: (640px) | Small screens |
md: (768px) | Medium screens |
lg: (1024px) | Large screens |
xl: (1280px) | Extra large |
2xl: (1536px) | 2X large |
md:flex lg:grid | Responsive classes |
hover:bg-blue-600 | Hover state |
focus:outline-none | Focus state |
active:bg-blue-700 | Active state |
disabled:opacity-50 | Disabled state |
first:pt-0 / last:pb-0 | First/last child |
odd:bg-gray-100 / even:bg-white | Odd/even |
group-hover:visible | Group hover |
peer-focus:ring | Peer state |
dark:bg-gray-800 | Dark mode class |
dark:text-white | Dark text |
darkMode: "class" | Class strategy (config) |
darkMode: "media" | Media strategy (config) |
transition | Default transition |
transition-all / transition-colors / transition-opacity | Transition properties |
duration-75 / duration-150 / duration-300 | Duration |
ease-linear / ease-in / ease-out / ease-in-out | Timing function |
delay-75 / delay-150 | Delay |
scale-50 / scale-100 / scale-150 | Scale |
rotate-45 / rotate-90 / -rotate-45 | Rotate |
translate-x-4 / translate-y-4 | Translate |
skew-x-3 / skew-y-3 | Skew |
origin-center / origin-top | Transform origin |
animate-spin / animate-ping / animate-pulse / animate-bounce | Animations |