1/28/2024 0 Comments React responsive layout![]() On medium screens and up, we’ve constrained the width to a fixed size and ensured the image is full height using md:h-full md:w-48. On small screens the image is automatically full width by default.Technically we could have just used shrink-0 since it would do nothing on smaller screens, but since it only matters on md screens, it’s a good idea to make that clear in the class name. When the parent is a flex container, we want to make sure the image never shrinks, so we’ve added md:shrink-0 to prevent shrinking on medium screens and larger.By default, the outer div is display: block, but by adding the md:flex utility, it becomes display: flex on medium screens and larger.Company retreats Incredible accommodation for your team Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine? We have a list of places to do just that. Here’s a simple example of a marketing page component that uses a stacked layout on small screens, and a side-by-side layout on larger screens (resize your browser to see it in action): This works for every utility class in the framework, which means you can change literally anything at a given breakpoint - even things like letter spacing or cursor styles. To add a utility but only have it take effect at a certain breakpoint, all you need to do is prefix the utility with the breakpoint name, followed by the : character: There are five breakpoints by default, inspired by common device resolutions: Breakpoint prefix ![]() Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |