diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index e46db9627..5e2725b64 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -5117,6 +5117,22 @@ video { max-width: 100% !important; } +.max-w-screen-sm { + max-width: 640px !important; +} + +.max-w-screen-md { + max-width: 768px !important; +} + +.max-w-screen-lg { + max-width: 1024px !important; +} + +.max-w-screen-xl { + max-width: 1280px !important; +} + .min-h-0 { min-height: 0 !important; } @@ -14451,6 +14467,22 @@ video { max-width: 100% !important; } + .sm\:max-w-screen-sm { + max-width: 640px !important; + } + + .sm\:max-w-screen-md { + max-width: 768px !important; + } + + .sm\:max-w-screen-lg { + max-width: 1024px !important; + } + + .sm\:max-w-screen-xl { + max-width: 1280px !important; + } + .sm\:min-h-0 { min-height: 0 !important; } @@ -23786,6 +23818,22 @@ video { max-width: 100% !important; } + .md\:max-w-screen-sm { + max-width: 640px !important; + } + + .md\:max-w-screen-md { + max-width: 768px !important; + } + + .md\:max-w-screen-lg { + max-width: 1024px !important; + } + + .md\:max-w-screen-xl { + max-width: 1280px !important; + } + .md\:min-h-0 { min-height: 0 !important; } @@ -33121,6 +33169,22 @@ video { max-width: 100% !important; } + .lg\:max-w-screen-sm { + max-width: 640px !important; + } + + .lg\:max-w-screen-md { + max-width: 768px !important; + } + + .lg\:max-w-screen-lg { + max-width: 1024px !important; + } + + .lg\:max-w-screen-xl { + max-width: 1280px !important; + } + .lg\:min-h-0 { min-height: 0 !important; } @@ -42456,6 +42520,22 @@ video { max-width: 100% !important; } + .xl\:max-w-screen-sm { + max-width: 640px !important; + } + + .xl\:max-w-screen-md { + max-width: 768px !important; + } + + .xl\:max-w-screen-lg { + max-width: 1024px !important; + } + + .xl\:max-w-screen-xl { + max-width: 1280px !important; + } + .xl\:min-h-0 { min-height: 0 !important; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 05f564b16..f3066a5de 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -5117,6 +5117,22 @@ video { max-width: 100%; } +.max-w-screen-sm { + max-width: 640px; +} + +.max-w-screen-md { + max-width: 768px; +} + +.max-w-screen-lg { + max-width: 1024px; +} + +.max-w-screen-xl { + max-width: 1280px; +} + .min-h-0 { min-height: 0; } @@ -14451,6 +14467,22 @@ video { max-width: 100%; } + .sm\:max-w-screen-sm { + max-width: 640px; + } + + .sm\:max-w-screen-md { + max-width: 768px; + } + + .sm\:max-w-screen-lg { + max-width: 1024px; + } + + .sm\:max-w-screen-xl { + max-width: 1280px; + } + .sm\:min-h-0 { min-height: 0; } @@ -23786,6 +23818,22 @@ video { max-width: 100%; } + .md\:max-w-screen-sm { + max-width: 640px; + } + + .md\:max-w-screen-md { + max-width: 768px; + } + + .md\:max-w-screen-lg { + max-width: 1024px; + } + + .md\:max-w-screen-xl { + max-width: 1280px; + } + .md\:min-h-0 { min-height: 0; } @@ -33121,6 +33169,22 @@ video { max-width: 100%; } + .lg\:max-w-screen-sm { + max-width: 640px; + } + + .lg\:max-w-screen-md { + max-width: 768px; + } + + .lg\:max-w-screen-lg { + max-width: 1024px; + } + + .lg\:max-w-screen-xl { + max-width: 1280px; + } + .lg\:min-h-0 { min-height: 0; } @@ -42456,6 +42520,22 @@ video { max-width: 100%; } + .xl\:max-w-screen-sm { + max-width: 640px; + } + + .xl\:max-w-screen-md { + max-width: 768px; + } + + .xl\:max-w-screen-lg { + max-width: 1024px; + } + + .xl\:max-w-screen-xl { + max-width: 1280px; + } + .xl\:min-h-0 { min-height: 0; } diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js index 7c43d7275..75dac0d41 100644 --- a/src/util/resolveConfig.js +++ b/src/util/resolveConfig.js @@ -20,6 +20,17 @@ const configUtils = { {} ) }, + breakpoints(screens) { + return Object.keys(screens) + .filter(key => typeof screens[key] === 'string') + .reduce( + (breakpoints, key) => ({ + ...breakpoints, + [`screen-${key}`]: screens[key], + }), + {} + ) + }, } function value(valueToResolve, ...args) { diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 181513e58..9fb014a45 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -302,19 +302,22 @@ module.exports = { full: '100%', screen: '100vh', }, - maxWidth: { - none: 'none', - xs: '20rem', - sm: '24rem', - md: '28rem', - lg: '32rem', - xl: '36rem', - '2xl': '42rem', - '3xl': '48rem', - '4xl': '56rem', - '5xl': '64rem', - '6xl': '72rem', - full: '100%', + maxWidth: (theme, { breakpoints }) => { + return { + none: 'none', + xs: '20rem', + sm: '24rem', + md: '28rem', + lg: '32rem', + xl: '36rem', + '2xl': '42rem', + '3xl': '48rem', + '4xl': '56rem', + '5xl': '64rem', + '6xl': '72rem', + full: '100%', + ...breakpoints(theme('screens')), + } }, minHeight: { '0': '0',