A Tailwind CSS plugin that provides fluid fonts and spacings
npm install -D tailwindcss-fluid-size
// or
yarn add -D tailwindcss-fluid-size
And add the plugin to your tailwind.config.js
file:
// tailwind.config.js
module.exports = {
// ...
plugins: [
require('tailwindcss-fluid-size'),
// ...
]
};
Just include the plugin and set the configuration. All settings are optional:
require('tailwindcss-fluid-size')({
prefix: '',
fontMin: 12,
fontMax: 16,
viewMin: 320,
viewMax: 1920,
fontMinKeep: false,
fontMaxKeep: false,
spaceMinKeep: false,
spaceMaxKeep: false,
fontSizes: {
xs1: { min: 0.625, max: 0.700, lh: 1.00 },
sm1: { min: 0.750, max: 0.800, lh: 1.25 },
bs1: { min: 1.000, max: 1.000, lh: 1.60 },
xl1: { min: 1.100, max: 1.800, lh: 1.3 },
},
spaceSizes: {
xs1: { min: 5, max: 20 },
md1: { min: 10, max: 40 },
lg1: { min: 20, max: 60 },
}
})
It will extend:
fontSizes
,margin
,padding
,inset
,gap
,w
,h
,max-w
,max-h
In you code just use it as you would with tailwind:
<h1 class="text-xl1">Big headline</h1>
<p class="text-bs1">Will be scaled</p>
<div clas="h-lg1">
<!-- I'm just a spacer -->
</div>
<!-- Combine -->
<p class="text-bs1 p-xs1">Added scaled padding to text</p>
<!-- In case you set a prefix (fluid) -->
<p class="text-fluid-bs1">Added scaled padding to text</p>
/**
* Custom prefix to set between the property and the value
* For example .p-{prefix}-xs1
*
* Default = ''
*/
prefix?: string;
/**
* The minimum view width to use for scaling
*
* Default = 320px
*/
viewMin?: number;
/**
* The maximum view width to use for scaling
*
* Default = 1920px
*/
viewMax?: number;
/**
* The minimum base font size to use for scaling
*
* Default = 12
*/
fontMin?: number;
/**
* The maximum base font size to use for scaling
*
* Default = 16
*/
fontMax?: number;
/**
* Whether to keep the size shrinking after the min viewport has
* been reached or just clamp the value to the min
*
* Default = false
*/
fontMinKeep?: boolean;
/**
* Whether to keep the size growing after the max viewport has
* been reached or just clamp the value to the max
*
* Default = false
*/
fontMaxKeep?: boolean;
/**
* Whether to keep the size shrinking after the min viewport has
* been reached or just clamp the value to the min
*
* Default = false
*/
spaceMinKeep?: boolean;
/**
* Whether to keep the size growing after the max viewport has
* been reached or just clamp the value to the max
*
* Default = false
*/
spaceMaxKeep?: boolean;
/**
* Default font size ratio definitions. You can define the font size
* ratios here. The ratio is always a multiplicator of the base min and max
* font size. For example a basic definition of `base` and `xs1` looks like
* this:
*
* ```
* {
* smol: { min: 0.625, max: 0.7, lh: 1 },
* base: { min: 1, max: 1, lh: 1.6 },
* }
* ```
*
* Smol will scale from (12 * 0.625)px to (16 * 0.7)px
* You can also set lh to define the lineheight for the size
*
* To use it in your code just reference it like this: `text-smol` etc.
*
* Default = {}
*/
fontSizes?: FluidSizeProps<FluidSizeFont>;
/**
* Default space size definitions (px). Similar to font sizes, you define
* a name and min & max value. The difference is you'll use pixel values here
* instead of multiplicators. A simple configuration could look like this:
*
* ```
* {
* megachonk: { min: 120px, max: 320px },
* ultrachonk: { min: 320px, max: 520px },
* }
* ```
*
* Smol will scale from (12 * 0.625)px to (16 * 0.7)px
* You can also set lh to define the lineheight for the size
*
* To use it in your code just reference it like this:
* - `h-megachonk`
* - `w-megachonk`
* - `p-megachonk`
* - `mt-megachonk`
* - ...
*
* It will extend: `margin`, `padding`, `inset`, `gap`, `w`,
* `h`, `max-w`, `max-h`
*
* Default = {}
*/
spaceSizes?: FluidSizeProps<FluidSizeSpace>;
MIT