Skip to content

Conversation

@adamwathan
Copy link
Member

This PR adds new max-width breakpoints to match the user's configured screens.

They take the form max-w-screen-{breakpoint}, like max-w-screen-xl.

Using these utilities, you can actually recreate the container component using only utilities:

<div class="max-w-full sm:max-w-screen-sm md:max-w-screen-md lg:max-w-screen-lg xl:max-w-screen-xl">...</div>

This is very useful when you need container-esque behavior but only at certain breakpoints. I've used it in the past to create layouts that were fluid from md down, but locked at lg and xl for example.

Currently this will only generate utilities for screens that are defined as strings, like 640px. For complex breakpoints that use our object syntax, these utilities are not generated. We can define some behavior for those in the future and include it without making any breaking changes, so let's just start with conventional min-width only breakpoints for now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants