block | display: block; | Element behaves as a block |
inline | display: inline; | Element behaves inline |
inline-block | display: inline-block; | Inline element with width/height |
flex | display: flex; | Enables flexbox layout |
grid | display: grid; | Enables CSS grid |
hidden | display: none; | Hides the element |
relative | position: relative; | Positions element relative to itself |
absolute | position: absolute; | Positions relative to nearest parent |
fixed | position: fixed; | Fixed relative to viewport |
sticky | position: sticky; | Sticks on scroll |
inset-0 | top:0; right:0; bottom:0; left:0; | Fills parent container |
flex-row | flex-direction: row; | Horizontal flex layout |
flex-col | flex-direction: column; | Vertical flex layout |
items-center | align-items: center; | Align items vertically center |
justify-center | justify-content: center; | Align items horizontally center |
justify-between | justify-content: space-between; | Space between items |
gap-4 | gap: 1rem; | Spacing between items |
grid-cols-3 | grid-template-columns: repeat(3, minmax(0,1fr)); | Creates 3 equal columns |
col-span-2 | grid-column: span 2 / span 2; | Spans 2 grid columns |
m-4 | margin: 1rem; | Outer spacing |
mx-4 | margin-left/right: 1rem; | Horizontal margin |
p-4 | padding: 1rem; | Inner spacing |
py-2 | padding-top/bottom: 0.5rem; | Vertical padding |
w-full | width: 100%; | Full width |
w-screen | width: 100vw; | Viewport width |
h-screen | height: 100vh; | Viewport height |
max-w-lg | max-width: 32rem; | Limits width |
text-center | text-align: center; | Centers text |
text-sm | font-size: 0.875rem; | Small text |
font-bold | font-weight: 700; | Bold text |
leading-relaxed | line-height: 1.625; | Relaxed line height |
text-white | color: #ffffff; | White text |
bg-blue-500 | background-color: rgb(59 130 246); | Blue background |
border | border-width: 1px; | Adds border |
rounded-lg | border-radius: 0.5rem; | Rounded corners |
shadow-md | box-shadow: medium; | Medium shadow |
opacity-50 | opacity: 0.5; | Half transparent |
cursor-pointer | cursor: pointer; | Pointer cursor |
select-none | user-select: none; | Disable text selection |
transition | transition-property: all; | Enable transitions |
duration-300 | transition-duration: 300ms; | Animation duration |
ease-in-out | transition-timing-function: ease-in-out; | Smooth animation |
z-10 | z-index: 10; | Layer priority |