A plugin that makes the use of Fluid Type a breeze.
Full Changelog: https://github.com/davidhellmann/tailwindcss-fluid-type/compare/2.0.5...2.0.6
Full Changelog: https://github.com/davidhellmann/tailwindcss-fluid-type/compare/2.0.4...2.0.5
Full Changelog: https://github.com/davidhellmann/tailwindcss-fluid-type/compare/2.0.3...2.0.4
theme('fontSize.2xl')
(fixed #10)Options are moved into plugin options like this:
module.exports = {
mode: 'jit',
theme: {},
variants: {},
corePlugins: {},
plugins: [
require('tailwindcss-fluid-type')({
settings: {
fontSizeMin: 1.125,
fontSizeMax: 1.25,
ratioMin: 1.125,
ratioMax: 1.2,
screenMin: 20,
screenMax: 96,
unit: 'rem',
prefix: ''
},
values: {
'xs': [-2, 1.6],
'sm': [-1, 1.6],
'base': [0, 1.6],
'lg': [1, 1.6],
'xl': [2, 1.2],
'2xl': [3, 1.2],
'3xl': [4, 1.2],
'4xl': [5, 1.1],
'5xl': [6, 1.1],
'6xl': [7, 1.1],
'7xl': [8, 1],
'8xl': [9, 1],
'9xl': [10, 1],
}
})
],
}
You can try this version with npm i tailwindcss-fluid-type@next
theme('fontSize.2xl')
(fixed #10)Options are moved into plugin options like this:
module.exports = {
mode: 'jit',
theme: {},
variants: {},
corePlugins: {},
plugins: [
require('tailwindcss-fluid-type')({
settings: {
fontSizeMin: 1.125,
fontSizeMax: 1.25,
ratioMin: 1.125,
ratioMax: 1.2,
screenMin: 20,
screenMax: 96,
unit: 'rem',
prefix: ''
},
values: {
'xs': [-2, 1.6],
'sm': [-1, 1.6],
'base': [0, 1.6],
'lg': [1, 1.6],
'xl': [2, 1.2],
'2xl': [3, 1.2],
'3xl': [4, 1.2],
'4xl': [5, 1.1],
'5xl': [6, 1.1],
'6xl': [7, 1.1],
'7xl': [8, 1],
'8xl': [9, 1],
'9xl': [10, 1],
}
})
],
}
You can try this version with npm i tailwindcss-fluid-type@next
It's now possible to use Tailwinds theme function like theme('fontSize.2xl')
(fixed #10)
Options are moved into plugin options like this:
module.exports = {
mode: 'jit',
theme: {},
variants: {},
corePlugins: {},
plugins: [
require('tailwindcss-fluid-type')({
settings: {
fontSizeMin: 1.125,
fontSizeMax: 1.25,
ratioMin: 1.125,
ratioMax: 1.2,
screenMin: 20,
screenMax: 96,
unit: 'rem',
prefix: ''
},
values: {
'xs': [-2, 1.6],
'sm': [-1, 1.6],
'base': [0, 1.6],
'lg': [1, 1.6],
'xl': [2, 1.2],
'2xl': [3, 1.2],
'3xl': [4, 1.2],
'4xl': [5, 1.1],
'5xl': [6, 1.1],
'6xl': [7, 1.1],
'7xl': [8, 1],
'8xl': [9, 1],
'9xl': [10, 1],
}
})
],
}
Fix #5 (add clamps and return as one liner)