Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add max-w-screen-{breakpoint} utilities #1284

Merged
merged 1 commit into from
Dec 27, 2019
Merged

Add max-w-screen-{breakpoint} utilities #1284

merged 1 commit into from
Dec 27, 2019

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.

None yet

1 participant