. container
.container-sm/md/lg/xl/2xl
tl/tr/bl/br/l/b/r/t —>top/left/right bottom/left-right …..
| Property name | talwind |
|---|---|
| height | h-25 h-full |
| width | w-30 w-full |
| padding | p-4 px-4 py-4 |
| margin | m-4 mx-4 my-4 |
| background | bg-green-500 |
| text | text-green-900 |
| font weight | font-black |
| space between container elements | space-y-6 |
| rounded-corners | rounded, rounded-lg |
| display | block, inline-block, block,flex,grid |
| text align | text-center/ text-justify |
| float | float-right/left/none |
| clear | clear-left/right/both/none |
| object | object-fill/contain/cover/scale-down/none |
| position object | object-left/right-top/bottom…. |
| overflow text | overflow-x/y-hideen/scroll/auto |
| css position container | static fixed relative absolute sticky |
| positon | top-0../bottom/left/right/inset/inset-x/inset-y-0 |
| visibility | visible/invisible |
| zindex | z-0/10/20/30/40/50/auto |
“dense” meaning that it will not object normal flow it will fill where empty space is there
Alignment flex and grids others
justify——Horizontally
align ——vertical
content —— center/ start/ end /evenly/between/around/stretch
item and self —— start/end / auto/stretch/center
$(-)$ for negative margin or padding and space (-px-0) (-mx-0) (-space-x-0)