diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 513c74bd7..df0a26237 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -3918,6 +3918,46 @@ video { height: 100vh !important; } +.text-xs { + font-size: 0.75rem !important; +} + +.text-sm { + font-size: 0.875rem !important; +} + +.text-base { + font-size: 1rem !important; +} + +.text-lg { + font-size: 1.125rem !important; +} + +.text-xl { + font-size: 1.25rem !important; +} + +.text-2xl { + font-size: 1.5rem !important; +} + +.text-3xl { + font-size: 1.875rem !important; +} + +.text-4xl { + font-size: 2.25rem !important; +} + +.text-5xl { + font-size: 3rem !important; +} + +.text-6xl { + font-size: 4rem !important; +} + .leading-3 { line-height: .75rem !important; } @@ -8130,46 +8170,6 @@ video { color: #702459 !important; } -.text-xs { - font-size: 0.75rem !important; -} - -.text-sm { - font-size: 0.875rem !important; -} - -.text-base { - font-size: 1rem !important; -} - -.text-lg { - font-size: 1.125rem !important; -} - -.text-xl { - font-size: 1.25rem !important; -} - -.text-2xl { - font-size: 1.5rem !important; -} - -.text-3xl { - font-size: 1.875rem !important; -} - -.text-4xl { - font-size: 2.25rem !important; -} - -.text-5xl { - font-size: 3rem !important; -} - -.text-6xl { - font-size: 4rem !important; -} - .italic { font-style: italic !important; } @@ -14311,6 +14311,46 @@ video { height: 100vh !important; } + .sm\:text-xs { + font-size: 0.75rem !important; + } + + .sm\:text-sm { + font-size: 0.875rem !important; + } + + .sm\:text-base { + font-size: 1rem !important; + } + + .sm\:text-lg { + font-size: 1.125rem !important; + } + + .sm\:text-xl { + font-size: 1.25rem !important; + } + + .sm\:text-2xl { + font-size: 1.5rem !important; + } + + .sm\:text-3xl { + font-size: 1.875rem !important; + } + + .sm\:text-4xl { + font-size: 2.25rem !important; + } + + .sm\:text-5xl { + font-size: 3rem !important; + } + + .sm\:text-6xl { + font-size: 4rem !important; + } + .sm\:leading-3 { line-height: .75rem !important; } @@ -18523,46 +18563,6 @@ video { color: #702459 !important; } - .sm\:text-xs { - font-size: 0.75rem !important; - } - - .sm\:text-sm { - font-size: 0.875rem !important; - } - - .sm\:text-base { - font-size: 1rem !important; - } - - .sm\:text-lg { - font-size: 1.125rem !important; - } - - .sm\:text-xl { - font-size: 1.25rem !important; - } - - .sm\:text-2xl { - font-size: 1.5rem !important; - } - - .sm\:text-3xl { - font-size: 1.875rem !important; - } - - .sm\:text-4xl { - font-size: 2.25rem !important; - } - - .sm\:text-5xl { - font-size: 3rem !important; - } - - .sm\:text-6xl { - font-size: 4rem !important; - } - .sm\:italic { font-style: italic !important; } @@ -24705,6 +24705,46 @@ video { height: 100vh !important; } + .md\:text-xs { + font-size: 0.75rem !important; + } + + .md\:text-sm { + font-size: 0.875rem !important; + } + + .md\:text-base { + font-size: 1rem !important; + } + + .md\:text-lg { + font-size: 1.125rem !important; + } + + .md\:text-xl { + font-size: 1.25rem !important; + } + + .md\:text-2xl { + font-size: 1.5rem !important; + } + + .md\:text-3xl { + font-size: 1.875rem !important; + } + + .md\:text-4xl { + font-size: 2.25rem !important; + } + + .md\:text-5xl { + font-size: 3rem !important; + } + + .md\:text-6xl { + font-size: 4rem !important; + } + .md\:leading-3 { line-height: .75rem !important; } @@ -28917,46 +28957,6 @@ video { color: #702459 !important; } - .md\:text-xs { - font-size: 0.75rem !important; - } - - .md\:text-sm { - font-size: 0.875rem !important; - } - - .md\:text-base { - font-size: 1rem !important; - } - - .md\:text-lg { - font-size: 1.125rem !important; - } - - .md\:text-xl { - font-size: 1.25rem !important; - } - - .md\:text-2xl { - font-size: 1.5rem !important; - } - - .md\:text-3xl { - font-size: 1.875rem !important; - } - - .md\:text-4xl { - font-size: 2.25rem !important; - } - - .md\:text-5xl { - font-size: 3rem !important; - } - - .md\:text-6xl { - font-size: 4rem !important; - } - .md\:italic { font-style: italic !important; } @@ -35099,6 +35099,46 @@ video { height: 100vh !important; } + .lg\:text-xs { + font-size: 0.75rem !important; + } + + .lg\:text-sm { + font-size: 0.875rem !important; + } + + .lg\:text-base { + font-size: 1rem !important; + } + + .lg\:text-lg { + font-size: 1.125rem !important; + } + + .lg\:text-xl { + font-size: 1.25rem !important; + } + + .lg\:text-2xl { + font-size: 1.5rem !important; + } + + .lg\:text-3xl { + font-size: 1.875rem !important; + } + + .lg\:text-4xl { + font-size: 2.25rem !important; + } + + .lg\:text-5xl { + font-size: 3rem !important; + } + + .lg\:text-6xl { + font-size: 4rem !important; + } + .lg\:leading-3 { line-height: .75rem !important; } @@ -39311,46 +39351,6 @@ video { color: #702459 !important; } - .lg\:text-xs { - font-size: 0.75rem !important; - } - - .lg\:text-sm { - font-size: 0.875rem !important; - } - - .lg\:text-base { - font-size: 1rem !important; - } - - .lg\:text-lg { - font-size: 1.125rem !important; - } - - .lg\:text-xl { - font-size: 1.25rem !important; - } - - .lg\:text-2xl { - font-size: 1.5rem !important; - } - - .lg\:text-3xl { - font-size: 1.875rem !important; - } - - .lg\:text-4xl { - font-size: 2.25rem !important; - } - - .lg\:text-5xl { - font-size: 3rem !important; - } - - .lg\:text-6xl { - font-size: 4rem !important; - } - .lg\:italic { font-style: italic !important; } @@ -45493,6 +45493,46 @@ video { height: 100vh !important; } + .xl\:text-xs { + font-size: 0.75rem !important; + } + + .xl\:text-sm { + font-size: 0.875rem !important; + } + + .xl\:text-base { + font-size: 1rem !important; + } + + .xl\:text-lg { + font-size: 1.125rem !important; + } + + .xl\:text-xl { + font-size: 1.25rem !important; + } + + .xl\:text-2xl { + font-size: 1.5rem !important; + } + + .xl\:text-3xl { + font-size: 1.875rem !important; + } + + .xl\:text-4xl { + font-size: 2.25rem !important; + } + + .xl\:text-5xl { + font-size: 3rem !important; + } + + .xl\:text-6xl { + font-size: 4rem !important; + } + .xl\:leading-3 { line-height: .75rem !important; } @@ -49705,46 +49745,6 @@ video { color: #702459 !important; } - .xl\:text-xs { - font-size: 0.75rem !important; - } - - .xl\:text-sm { - font-size: 0.875rem !important; - } - - .xl\:text-base { - font-size: 1rem !important; - } - - .xl\:text-lg { - font-size: 1.125rem !important; - } - - .xl\:text-xl { - font-size: 1.25rem !important; - } - - .xl\:text-2xl { - font-size: 1.5rem !important; - } - - .xl\:text-3xl { - font-size: 1.875rem !important; - } - - .xl\:text-4xl { - font-size: 2.25rem !important; - } - - .xl\:text-5xl { - font-size: 3rem !important; - } - - .xl\:text-6xl { - font-size: 4rem !important; - } - .xl\:italic { font-style: italic !important; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 0136ffc83..09ec4d8e5 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -3918,6 +3918,46 @@ video { height: 100vh; } +.text-xs { + font-size: 0.75rem; +} + +.text-sm { + font-size: 0.875rem; +} + +.text-base { + font-size: 1rem; +} + +.text-lg { + font-size: 1.125rem; +} + +.text-xl { + font-size: 1.25rem; +} + +.text-2xl { + font-size: 1.5rem; +} + +.text-3xl { + font-size: 1.875rem; +} + +.text-4xl { + font-size: 2.25rem; +} + +.text-5xl { + font-size: 3rem; +} + +.text-6xl { + font-size: 4rem; +} + .leading-3 { line-height: .75rem; } @@ -8130,46 +8170,6 @@ video { color: #702459; } -.text-xs { - font-size: 0.75rem; -} - -.text-sm { - font-size: 0.875rem; -} - -.text-base { - font-size: 1rem; -} - -.text-lg { - font-size: 1.125rem; -} - -.text-xl { - font-size: 1.25rem; -} - -.text-2xl { - font-size: 1.5rem; -} - -.text-3xl { - font-size: 1.875rem; -} - -.text-4xl { - font-size: 2.25rem; -} - -.text-5xl { - font-size: 3rem; -} - -.text-6xl { - font-size: 4rem; -} - .italic { font-style: italic; } @@ -14311,6 +14311,46 @@ video { height: 100vh; } + .sm\:text-xs { + font-size: 0.75rem; + } + + .sm\:text-sm { + font-size: 0.875rem; + } + + .sm\:text-base { + font-size: 1rem; + } + + .sm\:text-lg { + font-size: 1.125rem; + } + + .sm\:text-xl { + font-size: 1.25rem; + } + + .sm\:text-2xl { + font-size: 1.5rem; + } + + .sm\:text-3xl { + font-size: 1.875rem; + } + + .sm\:text-4xl { + font-size: 2.25rem; + } + + .sm\:text-5xl { + font-size: 3rem; + } + + .sm\:text-6xl { + font-size: 4rem; + } + .sm\:leading-3 { line-height: .75rem; } @@ -18523,46 +18563,6 @@ video { color: #702459; } - .sm\:text-xs { - font-size: 0.75rem; - } - - .sm\:text-sm { - font-size: 0.875rem; - } - - .sm\:text-base { - font-size: 1rem; - } - - .sm\:text-lg { - font-size: 1.125rem; - } - - .sm\:text-xl { - font-size: 1.25rem; - } - - .sm\:text-2xl { - font-size: 1.5rem; - } - - .sm\:text-3xl { - font-size: 1.875rem; - } - - .sm\:text-4xl { - font-size: 2.25rem; - } - - .sm\:text-5xl { - font-size: 3rem; - } - - .sm\:text-6xl { - font-size: 4rem; - } - .sm\:italic { font-style: italic; } @@ -24705,6 +24705,46 @@ video { height: 100vh; } + .md\:text-xs { + font-size: 0.75rem; + } + + .md\:text-sm { + font-size: 0.875rem; + } + + .md\:text-base { + font-size: 1rem; + } + + .md\:text-lg { + font-size: 1.125rem; + } + + .md\:text-xl { + font-size: 1.25rem; + } + + .md\:text-2xl { + font-size: 1.5rem; + } + + .md\:text-3xl { + font-size: 1.875rem; + } + + .md\:text-4xl { + font-size: 2.25rem; + } + + .md\:text-5xl { + font-size: 3rem; + } + + .md\:text-6xl { + font-size: 4rem; + } + .md\:leading-3 { line-height: .75rem; } @@ -28917,46 +28957,6 @@ video { color: #702459; } - .md\:text-xs { - font-size: 0.75rem; - } - - .md\:text-sm { - font-size: 0.875rem; - } - - .md\:text-base { - font-size: 1rem; - } - - .md\:text-lg { - font-size: 1.125rem; - } - - .md\:text-xl { - font-size: 1.25rem; - } - - .md\:text-2xl { - font-size: 1.5rem; - } - - .md\:text-3xl { - font-size: 1.875rem; - } - - .md\:text-4xl { - font-size: 2.25rem; - } - - .md\:text-5xl { - font-size: 3rem; - } - - .md\:text-6xl { - font-size: 4rem; - } - .md\:italic { font-style: italic; } @@ -35099,6 +35099,46 @@ video { height: 100vh; } + .lg\:text-xs { + font-size: 0.75rem; + } + + .lg\:text-sm { + font-size: 0.875rem; + } + + .lg\:text-base { + font-size: 1rem; + } + + .lg\:text-lg { + font-size: 1.125rem; + } + + .lg\:text-xl { + font-size: 1.25rem; + } + + .lg\:text-2xl { + font-size: 1.5rem; + } + + .lg\:text-3xl { + font-size: 1.875rem; + } + + .lg\:text-4xl { + font-size: 2.25rem; + } + + .lg\:text-5xl { + font-size: 3rem; + } + + .lg\:text-6xl { + font-size: 4rem; + } + .lg\:leading-3 { line-height: .75rem; } @@ -39311,46 +39351,6 @@ video { color: #702459; } - .lg\:text-xs { - font-size: 0.75rem; - } - - .lg\:text-sm { - font-size: 0.875rem; - } - - .lg\:text-base { - font-size: 1rem; - } - - .lg\:text-lg { - font-size: 1.125rem; - } - - .lg\:text-xl { - font-size: 1.25rem; - } - - .lg\:text-2xl { - font-size: 1.5rem; - } - - .lg\:text-3xl { - font-size: 1.875rem; - } - - .lg\:text-4xl { - font-size: 2.25rem; - } - - .lg\:text-5xl { - font-size: 3rem; - } - - .lg\:text-6xl { - font-size: 4rem; - } - .lg\:italic { font-style: italic; } @@ -45493,6 +45493,46 @@ video { height: 100vh; } + .xl\:text-xs { + font-size: 0.75rem; + } + + .xl\:text-sm { + font-size: 0.875rem; + } + + .xl\:text-base { + font-size: 1rem; + } + + .xl\:text-lg { + font-size: 1.125rem; + } + + .xl\:text-xl { + font-size: 1.25rem; + } + + .xl\:text-2xl { + font-size: 1.5rem; + } + + .xl\:text-3xl { + font-size: 1.875rem; + } + + .xl\:text-4xl { + font-size: 2.25rem; + } + + .xl\:text-5xl { + font-size: 3rem; + } + + .xl\:text-6xl { + font-size: 4rem; + } + .xl\:leading-3 { line-height: .75rem; } @@ -49705,46 +49745,6 @@ video { color: #702459; } - .xl\:text-xs { - font-size: 0.75rem; - } - - .xl\:text-sm { - font-size: 0.875rem; - } - - .xl\:text-base { - font-size: 1rem; - } - - .xl\:text-lg { - font-size: 1.125rem; - } - - .xl\:text-xl { - font-size: 1.25rem; - } - - .xl\:text-2xl { - font-size: 1.5rem; - } - - .xl\:text-3xl { - font-size: 1.875rem; - } - - .xl\:text-4xl { - font-size: 2.25rem; - } - - .xl\:text-5xl { - font-size: 3rem; - } - - .xl\:text-6xl { - font-size: 4rem; - } - .xl\:italic { font-style: italic; } diff --git a/__tests__/plugins/fontSize.test.js b/__tests__/plugins/fontSize.test.js new file mode 100644 index 000000000..431ccc052 --- /dev/null +++ b/__tests__/plugins/fontSize.test.js @@ -0,0 +1,30 @@ +import invokePlugin from '../util/invokePlugin' +import plugin from '../../src/plugins/fontSize' + +test('font-size utilities can include a default line-height', () => { + const config = { + theme: { + fontSize: { + sm: '12px', + md: ['16px', '24px'], + lg: ['20px', '28px'], + }, + }, + variants: { + fontSize: ['responsive'], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.text-sm': { 'font-size': '12px' }, + '.text-md': { 'font-size': '16px', 'line-height': '24px' }, + '.text-lg': { 'font-size': '20px', 'line-height': '28px' }, + }, + ['responsive'], + ], + ]) +}) diff --git a/src/corePlugins.js b/src/corePlugins.js index ce66a9049..53d0c3280 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -126,6 +126,7 @@ export default function({ corePlugins: corePluginConfig }) { fontFamily, fontWeight, height, + fontSize, lineHeight, listStylePosition, listStyleType, @@ -152,7 +153,6 @@ export default function({ corePlugins: corePluginConfig }) { tableLayout, textAlign, textColor, - fontSize, fontStyle, textTransform, textDecoration, diff --git a/src/plugins/fontSize.js b/src/plugins/fontSize.js index 709cb0371..ea06168a6 100644 --- a/src/plugins/fontSize.js +++ b/src/plugins/fontSize.js @@ -4,10 +4,17 @@ export default function() { return function({ addUtilities, e, theme, variants }) { const utilities = _.fromPairs( _.map(theme('fontSize'), (value, modifier) => { + const [fontSize, lineHeight] = Array.isArray(value) ? value : [value] + return [ `.${e(`text-${modifier}`)}`, { - 'font-size': value, + 'font-size': fontSize, + ...(lineHeight === undefined + ? {} + : { + 'line-height': lineHeight, + }), }, ] })