No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that’s really just a flex container. You aren’t wasting energy inventing class names.In fact it’s just about impossible to think this is a good idea the first time you see it - you have to actually try it.īut once you’ve actually built something this way, you’ll quickly notice some really important benefits: Now I know what you’re thinking, “this is an atrocity, what a horrible mess!” and you’re right, it’s kind of ugly. This approach allows us to implement a completely custom component design without writing a single line of custom CSS. The font size, text color, and font-weight utilities ( text-xl, text-black, font-medium, etc.) to style the card text.The space-between utilities ( space-x-4) to handle the spacing between the logo and the text.The width and height utilities ( w-12 and h-12) to size the logo image.The background color, border radius, and box-shadow utilities ( bg-white, rounded-xl, and shadow-lg) to style the card’s appearance.The max-width and margin utilities ( max-w-sm and mx-auto) to constrain the card width and center it horizontally.Tailwind’s flexbox and padding utilities ( flex, shrink-0, and p-6) to control the overall card layout.With Tailwind, you style elements by applying pre-existing classes directly in your HTML.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |