Tailwindcss Learning Tutorial P001

The display and padding utilities (flex, shrink-0, and p-6) to control the overall layout

The max-width and margin utilities (max-w-sm and mx-auto) to constrain the card width and center it horizontally

The background-color, border-radius, and box-shadow utilities (bg-white, rounded-xl, and shadow-lg) to style the card’s appearance

The width and height utilities (size-12) to set the width and height of the logo image

The gap utilities (gap-x-4) to handle the spacing between the logo and the text

The font-size, color, and font-weight utilities (text-xl, text-black, font-medium, etc.) to style the card text

To style an element on states like hover or focus, prefix any utility with the state you want to target, for example hover:bg-sky-700: