Tailwind CSS

布局

p-4 / m-4—Padding / margin 1rem
px-4 / py-4—Horizontal / vertical
pt-2 / pb-2—Top / bottom
pl-2 / pr-2—Left / right
space-x-4—Horizontal child gap
space-y-4—Vertical child gap
p-0 / m-0—Zero spacing
-mt-4—Negative margin

间距

w-full / h-full—100% width/height
w-screen / h-screen—100vw / 100vh
w-1/2 / w-1/3—Fractional width
w-64 / h-64—16rem (256px)
max-w-md / max-w-lg—Max width breakpoints
min-h-screen—Min height 100vh
w-auto / h-auto—Auto sizing
w-fit / h-fit—Fit content

排版

flex—Display flex
flex-row / flex-col—Direction
items-center—Align items center
justify-center—Justify center
justify-between—Space between
flex-wrap—Wrap items
flex-1—Grow to fill
flex-none—No grow/shrink
gap-4—Gap between items
self-start / self-end—Align self

颜色

grid—Display grid
grid-cols-3—3 columns
grid-rows-2—2 rows
col-span-2—Span 2 columns
row-span-2—Span 2 rows
gap-4—Grid gap
place-items-center—Center all items
grid-cols-[1fr_2fr]—Custom columns

响应式

text-sm / text-base / text-lg—Font size
text-xl / text-2xl / text-4xl—Larger font sizes
font-bold / font-semibold—Font weight
font-light / font-normal—Lighter weights
italic / not-italic—Font style
text-center / text-right—Text alignment
leading-tight / leading-loose—Line height
tracking-wide / tracking-tight—Letter spacing
uppercase / lowercase—Text transform
truncate—Truncate with ellipsis
line-clamp-3—Clamp to 3 lines
underline / line-through—Text decoration

Colors

text-gray-500—Text color (gray)
bg-blue-500—Background blue
border-red-300—Border color
text-white / text-black—White / black text
bg-transparent—No background
text-slate-900—Dark slate text
bg-gradient-to-r—Gradient direction
from-blue-500 to-purple-500—Gradient colors

Borders & Effects

border / border-2—Border width
border-t / border-b—Top / bottom border
rounded / rounded-lg—Border radius
rounded-full—Circle / pill shape
shadow / shadow-lg—Box shadow
opacity-50—50% opacity
ring-2 ring-blue-500—Focus ring
divide-y—Dividers between children

Layout & Position

relative / absolute—Positioning
fixed / sticky—Fixed / sticky position
top-0 / right-0—Position offsets
inset-0—All edges to 0
z-10 / z-50—Z-index layers
overflow-hidden—Hide overflow
overflow-auto—Scroll on overflow
hidden / block / inline—Display types

Responsive & States

sm: / md: / lg: / xl:—Breakpoint prefixes
hover:—Hover state
focus:—Focus state
active:—Active/pressed state
dark:—Dark mode
first: / last:—First/last child
group-hover:—Parent hover state
disabled:—Disabled state

Transitions & Animations

transition—Default transition
transition-colors—Color transitions
duration-300—300ms duration
ease-in-out—Easing function
animate-spin—Spinning animation
animate-bounce—Bounce animation
animate-pulse—Pulse animation
transform hover:scale-105—Scale on hover
allprintabledoc.com