Use progressive maxWidth scale

This commit is contained in:
Adam Wathan 2019-03-01 14:13:39 -05:00
parent 2fd9dc543e
commit 4ed557ea98
3 changed files with 211 additions and 88 deletions

View File

@ -3730,35 +3730,47 @@ table {
}
.max-w-sm {
max-width: 30rem !important;
max-width: 24rem !important;
}
.max-w-md {
max-width: 40rem !important;
max-width: 28rem !important;
}
.max-w-lg {
max-width: 50rem !important;
max-width: 32rem !important;
}
.max-w-xl {
max-width: 60rem !important;
max-width: 36rem !important;
}
.max-w-2xl {
max-width: 70rem !important;
max-width: 42rem !important;
}
.max-w-3xl {
max-width: 80rem !important;
max-width: 48rem !important;
}
.max-w-4xl {
max-width: 90rem !important;
max-width: 56rem !important;
}
.max-w-5xl {
max-width: 100rem !important;
max-width: 64rem !important;
}
.max-w-7xl {
max-width: 72rem !important;
}
.max-w-8xl {
max-width: 80rem !important;
}
.max-w-9xl {
max-width: 90rem !important;
}
.max-w-full {
@ -9815,35 +9827,47 @@ table {
}
.sm\:max-w-sm {
max-width: 30rem !important;
max-width: 24rem !important;
}
.sm\:max-w-md {
max-width: 40rem !important;
max-width: 28rem !important;
}
.sm\:max-w-lg {
max-width: 50rem !important;
max-width: 32rem !important;
}
.sm\:max-w-xl {
max-width: 60rem !important;
max-width: 36rem !important;
}
.sm\:max-w-2xl {
max-width: 70rem !important;
max-width: 42rem !important;
}
.sm\:max-w-3xl {
max-width: 80rem !important;
max-width: 48rem !important;
}
.sm\:max-w-4xl {
max-width: 90rem !important;
max-width: 56rem !important;
}
.sm\:max-w-5xl {
max-width: 100rem !important;
max-width: 64rem !important;
}
.sm\:max-w-7xl {
max-width: 72rem !important;
}
.sm\:max-w-8xl {
max-width: 80rem !important;
}
.sm\:max-w-9xl {
max-width: 90rem !important;
}
.sm\:max-w-full {
@ -15885,35 +15909,47 @@ table {
}
.md\:max-w-sm {
max-width: 30rem !important;
max-width: 24rem !important;
}
.md\:max-w-md {
max-width: 40rem !important;
max-width: 28rem !important;
}
.md\:max-w-lg {
max-width: 50rem !important;
max-width: 32rem !important;
}
.md\:max-w-xl {
max-width: 60rem !important;
max-width: 36rem !important;
}
.md\:max-w-2xl {
max-width: 70rem !important;
max-width: 42rem !important;
}
.md\:max-w-3xl {
max-width: 80rem !important;
max-width: 48rem !important;
}
.md\:max-w-4xl {
max-width: 90rem !important;
max-width: 56rem !important;
}
.md\:max-w-5xl {
max-width: 100rem !important;
max-width: 64rem !important;
}
.md\:max-w-7xl {
max-width: 72rem !important;
}
.md\:max-w-8xl {
max-width: 80rem !important;
}
.md\:max-w-9xl {
max-width: 90rem !important;
}
.md\:max-w-full {
@ -21955,35 +21991,47 @@ table {
}
.lg\:max-w-sm {
max-width: 30rem !important;
max-width: 24rem !important;
}
.lg\:max-w-md {
max-width: 40rem !important;
max-width: 28rem !important;
}
.lg\:max-w-lg {
max-width: 50rem !important;
max-width: 32rem !important;
}
.lg\:max-w-xl {
max-width: 60rem !important;
max-width: 36rem !important;
}
.lg\:max-w-2xl {
max-width: 70rem !important;
max-width: 42rem !important;
}
.lg\:max-w-3xl {
max-width: 80rem !important;
max-width: 48rem !important;
}
.lg\:max-w-4xl {
max-width: 90rem !important;
max-width: 56rem !important;
}
.lg\:max-w-5xl {
max-width: 100rem !important;
max-width: 64rem !important;
}
.lg\:max-w-7xl {
max-width: 72rem !important;
}
.lg\:max-w-8xl {
max-width: 80rem !important;
}
.lg\:max-w-9xl {
max-width: 90rem !important;
}
.lg\:max-w-full {
@ -28025,35 +28073,47 @@ table {
}
.xl\:max-w-sm {
max-width: 30rem !important;
max-width: 24rem !important;
}
.xl\:max-w-md {
max-width: 40rem !important;
max-width: 28rem !important;
}
.xl\:max-w-lg {
max-width: 50rem !important;
max-width: 32rem !important;
}
.xl\:max-w-xl {
max-width: 60rem !important;
max-width: 36rem !important;
}
.xl\:max-w-2xl {
max-width: 70rem !important;
max-width: 42rem !important;
}
.xl\:max-w-3xl {
max-width: 80rem !important;
max-width: 48rem !important;
}
.xl\:max-w-4xl {
max-width: 90rem !important;
max-width: 56rem !important;
}
.xl\:max-w-5xl {
max-width: 100rem !important;
max-width: 64rem !important;
}
.xl\:max-w-7xl {
max-width: 72rem !important;
}
.xl\:max-w-8xl {
max-width: 80rem !important;
}
.xl\:max-w-9xl {
max-width: 90rem !important;
}
.xl\:max-w-full {

View File

@ -3730,35 +3730,47 @@ table {
}
.max-w-sm {
max-width: 30rem;
max-width: 24rem;
}
.max-w-md {
max-width: 40rem;
max-width: 28rem;
}
.max-w-lg {
max-width: 50rem;
max-width: 32rem;
}
.max-w-xl {
max-width: 60rem;
max-width: 36rem;
}
.max-w-2xl {
max-width: 70rem;
max-width: 42rem;
}
.max-w-3xl {
max-width: 80rem;
max-width: 48rem;
}
.max-w-4xl {
max-width: 90rem;
max-width: 56rem;
}
.max-w-5xl {
max-width: 100rem;
max-width: 64rem;
}
.max-w-7xl {
max-width: 72rem;
}
.max-w-8xl {
max-width: 80rem;
}
.max-w-9xl {
max-width: 90rem;
}
.max-w-full {
@ -9815,35 +9827,47 @@ table {
}
.sm\:max-w-sm {
max-width: 30rem;
max-width: 24rem;
}
.sm\:max-w-md {
max-width: 40rem;
max-width: 28rem;
}
.sm\:max-w-lg {
max-width: 50rem;
max-width: 32rem;
}
.sm\:max-w-xl {
max-width: 60rem;
max-width: 36rem;
}
.sm\:max-w-2xl {
max-width: 70rem;
max-width: 42rem;
}
.sm\:max-w-3xl {
max-width: 80rem;
max-width: 48rem;
}
.sm\:max-w-4xl {
max-width: 90rem;
max-width: 56rem;
}
.sm\:max-w-5xl {
max-width: 100rem;
max-width: 64rem;
}
.sm\:max-w-7xl {
max-width: 72rem;
}
.sm\:max-w-8xl {
max-width: 80rem;
}
.sm\:max-w-9xl {
max-width: 90rem;
}
.sm\:max-w-full {
@ -15885,35 +15909,47 @@ table {
}
.md\:max-w-sm {
max-width: 30rem;
max-width: 24rem;
}
.md\:max-w-md {
max-width: 40rem;
max-width: 28rem;
}
.md\:max-w-lg {
max-width: 50rem;
max-width: 32rem;
}
.md\:max-w-xl {
max-width: 60rem;
max-width: 36rem;
}
.md\:max-w-2xl {
max-width: 70rem;
max-width: 42rem;
}
.md\:max-w-3xl {
max-width: 80rem;
max-width: 48rem;
}
.md\:max-w-4xl {
max-width: 90rem;
max-width: 56rem;
}
.md\:max-w-5xl {
max-width: 100rem;
max-width: 64rem;
}
.md\:max-w-7xl {
max-width: 72rem;
}
.md\:max-w-8xl {
max-width: 80rem;
}
.md\:max-w-9xl {
max-width: 90rem;
}
.md\:max-w-full {
@ -21955,35 +21991,47 @@ table {
}
.lg\:max-w-sm {
max-width: 30rem;
max-width: 24rem;
}
.lg\:max-w-md {
max-width: 40rem;
max-width: 28rem;
}
.lg\:max-w-lg {
max-width: 50rem;
max-width: 32rem;
}
.lg\:max-w-xl {
max-width: 60rem;
max-width: 36rem;
}
.lg\:max-w-2xl {
max-width: 70rem;
max-width: 42rem;
}
.lg\:max-w-3xl {
max-width: 80rem;
max-width: 48rem;
}
.lg\:max-w-4xl {
max-width: 90rem;
max-width: 56rem;
}
.lg\:max-w-5xl {
max-width: 100rem;
max-width: 64rem;
}
.lg\:max-w-7xl {
max-width: 72rem;
}
.lg\:max-w-8xl {
max-width: 80rem;
}
.lg\:max-w-9xl {
max-width: 90rem;
}
.lg\:max-w-full {
@ -28025,35 +28073,47 @@ table {
}
.xl\:max-w-sm {
max-width: 30rem;
max-width: 24rem;
}
.xl\:max-w-md {
max-width: 40rem;
max-width: 28rem;
}
.xl\:max-w-lg {
max-width: 50rem;
max-width: 32rem;
}
.xl\:max-w-xl {
max-width: 60rem;
max-width: 36rem;
}
.xl\:max-w-2xl {
max-width: 70rem;
max-width: 42rem;
}
.xl\:max-w-3xl {
max-width: 80rem;
max-width: 48rem;
}
.xl\:max-w-4xl {
max-width: 90rem;
max-width: 56rem;
}
.xl\:max-w-5xl {
max-width: 100rem;
max-width: 64rem;
}
.xl\:max-w-7xl {
max-width: 72rem;
}
.xl\:max-w-8xl {
max-width: 80rem;
}
.xl\:max-w-9xl {
max-width: 90rem;
}
.xl\:max-w-full {

View File

@ -256,14 +256,17 @@ module.exports = function() {
},
maxWidth: {
xs: '20rem',
sm: '30rem',
md: '40rem',
lg: '50rem',
xl: '60rem',
'2xl': '70rem',
'3xl': '80rem',
'4xl': '90rem',
'5xl': '100rem',
sm: '24rem',
md: '28rem',
lg: '32rem',
xl: '36rem',
'2xl': '42rem',
'3xl': '48rem',
'4xl': '56rem',
'5xl': '64rem',
'7xl': '72rem',
'8xl': '80rem',
'9xl': '90rem',
full: '100%',
},
maxHeight: {