Add max-w-screen-{breakpoint}
utilities
#1284
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds new max-width breakpoints to match the user's configured
screens
.They take the form
max-w-screen-{breakpoint}
, likemax-w-screen-xl
.Using these utilities, you can actually recreate the
container
component using only utilities: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 atlg
andxl
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 conventionalmin-width
only breakpoints for now.