Tailwind CSS utilities & plugin to use CSS clamp
in your project. Enabling fluid interfaces using Tailwind syntax.
The plugin is based on the formula presented in this article
- Clamp values between a min and max viewport width, making it grow / shrink with the viewport.
- Possibility to use small to large, large to small, negative to positive, positive to negative and negative to negative values. (Negative values only work on properties that allow them, e.g.
margin
) - Helper functions to simplify the definition of clamped values in your config.
- Tailwind plugin to allow the usage of arbitrary values using the
clamp-[...]
syntax. - Values are interpreted as pixels and output as
rem
Install the plugin from npm:
npm install nicolas-cusan/tailwind-clamp
The package provides two helper functions to help you define "clamped" values in your config:
-
start
{number}
: Value atminViewportWidth
viewport size. The value is interpreted as pixels and outputted asrem
in the generated CSS. -
end
{number}
: Value atmaxViewportWidth
viewport size. The value is interpreted as pixels and outputted asrem
in the generated CSS. -
[minViewportWidth=375]
{number}
: Viewport size, where the clamp starts, defaults to375
. The value is interpreted as pixels. Value should be smaller thanmaxViewportWidth
. -
[maxViewportWidth=1440]
{number}
: Viewport size, where the clamp stops, defaults to1440
The value is interpreted as pixels. Value should be smaller thanminViewportWidth
.
-
start
{[fontSize: number, lineHeight: number]}
: Array of two numbers:font-size
andline-height
respectively atminViewportWidth
viewport size. Both values are interpreted as pixels and outputted asrem
in the generated CSS. -
end
{[fontSize: number, lineHeight: number]}
: Array of two numbers:font-size
andline-height
respectively atmaxViewportWidth
viewport size. Both values are interpreted as pixels and outputted asrem
in the generated CSS. -
[tracking=null]
{string|null}
:letter-spacing
setting, it is recommended to use theem
unit as it proportional to the font size, e.g.-0.01em
-
[minViewportWidth=375]
{number}
: Viewport size, where the clamp starts, defaults to375
. The value is interpreted as pixels. Value should be smaller thanmaxViewportWidth
. -
[maxViewportWidth=1440]
{number}
: Viewport size, where the clamp stops, defaults to1440
The value is interpreted as pixels. Value should be smaller thanminViewportWidth
.
// tailwind.config.js
const { setupClamp } = require('tailwind-clamp/src/utils.js');
const clampOptions = {
minViewportWidth: 375,
maxViewportWidth: 1440,
};
// Setup the clamp helper functions with the default min and max viewport sizes you want to use
const { clamp, clampFs } = setupClamp(options);
module.exports = {
theme: {
// ...
extend: {
spacing: {
// Use
grid: clamp(10, 20),
},
fontSize: {
base: clampFs([16, 20], [24, 28], '-0.01em'),
},
},
},
// ...
};
The package also provides a plugin to use arbitrary values via the clamp-[...]
syntax.
// tailwind.config.js
const clampOptions = {
minViewportWidth: 375,
maxViewportWidth: 1440,
};
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwind-clamp')(clampOptions),
// ...
],
};
This plugin allows two configuration options:
Name | Description | Default value |
---|---|---|
minViewportWidth |
Viewport size where the clamp starts | 375 |
maxViewportWidth |
Viewport size where the clamp end | 1440 |
The arbitrary values syntax for clamp requires at least three arguments separated by commas without whitespace:
-
property
{string}
: Property that the value should be applied to. See a list of all supported properties below. -
start
{number}
: Value atminViewportWidth
viewport size. The value is interpreted as pixels and output asrem
in the generated CSS. -
end
{number}
: Value atmaxViewportWidth
viewport size. The value is interpreted as pixels and output asrem
in the generated CSS. -
[minViewportWidth=375]
{number}
: Viewport size, where the clamp starts, defaults to375
. The value is interpreted as pixels. Value should be smaller thanmaxViewportWidth
. -
[maxViewportWidth=1440]
{number}
: Viewport size, where the clamp stops, defaults to1440
The value is interpreted as pixels. Value should be smaller thanminViewportWidth
.
<div class="clamp-[px,20,40] clamp-[py,10,18]">
Add some fluid padding here.
</div>
-
p
includingpt
,pb
,pl
,pr
,px
,py
. -
m
includingmt
,mb
,ml
,mr
,mx
,my
. inset
top
left
right
bottom
-
text
applied tofont-size
. -
gap
includinggap-x
,gap-y
. w
h
size
min-w
min-h
max-w
max-h
-
rounded
includingrounded-t
,rounded-r
,rounded-b
,rounded-l
,rounded-tl
,rounded-tr
,rounded-bl
,rounded-br
. translate-x
translate-y
text-stroke
stroke
leading
-
border
includingborder-t
,border-b
,border-l
,border-r
,border-x
,border-y
. scroll-m
- Support other units e.g
%
- Support directional properties e.g.
ps
- Add showcase