Responsive columns on small devices full#
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.Here are five ideas you can use to find your first customers. Case study Finding customers for your new business Getting a new business off the ground is a lot of hard work. 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 kommentar(er)
