A Tailwind CSS plugin that provides all applicable fluid-responsive utilities.
Install the plugin with npm
:
npm install -D https://github.com/itekhi/tailwindcss-fully-fluid
Then add the plugin to your tailwind.config.js
file:
module.exports = {
// ...
theme: {
// ...
},
plugins: [
require('tailwindcss-fully-fluid')
],
}
First of all, you should set screenMin
and screenMax
in the plugin configuration to your min and max breakpoints. Or leave them at default, which are sm
(640px) and 2xl
(1536px) from tailwind's configuration. These values will determine where classes will start to resize based on viewport and where to stop.
⚠️ If you useuseClamp
, which is the default, you should not change these values in the middle of your project, as this will change theclamp
values and your UI will appear smaller or bigger. (See How it works).
All classes are the same as in tailwind. Just with -vw-
in between.
For example inset-10
from tailwind will be inset-vw-10
.
-
Spacing
Spacing includes:
padding
,margin
,width
,max-width
,height
,max-height
,gap
,inset
(ortop
,left
,right
,bottom
),translate
,translateX
,translateY
.<!-- width, height --> <div className="w-vw-20 h-vw-20"></div> <div className="max-w-vw-20 max-h-vw-20"></div> <!-- margin --> <div className="m-vw-10"></div> <div className="mt-vw-10 ml-vw-10"></div> <!-- margins, insets, transforms can also be negative --> <div className="-mb-vw-10 -mr-vw-10 translate-vw-10"></div> <div className="-translate-x-vw-24 -translate-y-vw-24"></div>
-
Font sizes
<div className="text-vw-xs"></div> <!-- ... --> <div className="text-vw-9xl"></div>
-
Border radiuses
<div className="rounded-vw-sm"></div> <!-- ... --> <div className="rounded-vw-3xl"></div>
Example with default options:
{
// ...
plugins: [
require('tailwindcss-fully-fluid')({
screenMin: 'sm',
screenMax: '2xl',
useClamp: true,
extraSizes: {},
defaultLineHeight: 1.25
})
]
}
Key | Value | Description |
---|---|---|
screenMin | 'sm' ... '2xl' | '320px' |
Min breakpoint where to stop resizing based on viewport. Can be screen name from tailwind theme config, or any custom value. |
screenMax | 'sm' ... '2xl' | '1920px' |
Max breakpoint where to stop resizing based on viewport. Can be screen name from tailwind theme config, or any custom value. |
useClamp | true | false |
If true will use CSS's clamp function, otherwise all classes will just use vw . |
useMediaReset | true | false | 'min' | 'max' |
Not supported anymore! |
extraSizes | Object |
See Adding more sizes |
defaultLineHeight | Float | null |
I think this options explains itself, it sets line height to all of the font-size classes. Can be null to not set line-height at all. |
There are 3 ways you can add more sizes:
-
You can extend tailwind's
spacing
,fontSize
orborderRadius
properties.I recommend this one, because this way you will get the normal classes + fluid sizes (plugin will calculate and add these values).
You can set any values to the keys. But I recommend you to stick with tailwind's intervals of values. For example for
fontSize
, take 2 last values:8xl: 6rem
and9xl: 8rem
, the interval is2rem
, so add it to the last value8rem
and voila you have the10xl: 10rem
.{ theme: { extend: { spacing: { 112: '28rem' }, borderRadius: { '4xl': '2rem' }, fontSize: { '10xl': '10rem' } } }, // ... }
-
Another way is through plugin's
extraSizes
configuration.-
For
spacing
you can just add any value you want. I recommend to add values in an interval of 8 or 16. For example the last value in tailwind's spacing is 96,96 + 16 = 112
,112 + 16 = 128
and so on. -
For
fontSize
orborderRadius
it's a bit harder:Key is any name you want that in the end will be like
text-vw-[key]
.And for the value of this key - the power of base value. Base value for
fontSize
isbase
(text-base), forborderRadius
-DEFAULT
(nothing).For example if you want to add
xxs
to the font sizes, the power of base will be-3
.// name // power of text-xxs = -3 // your new value text-xs = -2 text-sm = -1 text-base = 0 // base value // ... text-8xl = 9 text-9xl = 10
// name // power of rounded-sm = -1 rounded = 0 // base value // ... rounded-3xl = 5 rounded-4xl = 6 // new value
{ // ... plugins: [ require('tailwindcss-fully-fluid')({ extraSizes: { spacing: [ 112, 128 ], fontSize: { 'xxs': -3, '10xl': 11, '11xl': 12 }, borderRadius: { '4xl': 6, '5xl': 7 } } }) ] }
-
-
The third way is to extend
fluid
object in yourtheme
config.You should use this only if you need to, for example set
lineHeight
of font sizes.I don't know any other use case of this, as it is pretty hard to calculate the right
clampMin
,clampMax
andvw
for clamp to stop resizing at right breakpoints.⚠️ Notice that putting thefluid
object directly insidetheme
will remove other precalculated values and plugin will crash if you don't set all of the base keys -spacing
,fontSize
andborderRadius
. Rather putfluid
intheme.extend
object.{ theme: { extend: { fluid: { fontSize: { // this is how to change lineHeight for sm size 'sm': { // Recommendation: Set lineHeight unitless. lineHeight: 1.1 }, // this is how config looks under the hood // values for `borderRadius` and `spacing` look the same, but without `lineHeight`. 'xs': { clampMin: '7px', clampMax: '16px', vw: '0.9375vw', lineHeight: 1.25 }, // ... '9xl': { clampMin: '64px', clampMax: '192px', vw: '10vw', lineHeight: 1.25 } } } } } // ... }
All of the values and classes are taken from your tailwind configuration and then just recalculated to vw
.
For the minimum breakpoint I will use 640px
(or sm
in tailwind). (screenMin
in configuration)
And for the maximum - 1536px
(or 2xl
in tailwind). (screenMax
in configuration)
For an example value, that needs to be fluid, I'll use xs
font size - 12px
.
So you can see how this will be the same as in Customization.
The calculation of vw
values goes like this for ALL of the properties in this plugin:
-
Gets the average screen:
avgScreen = [min] + (([max] - [min]) / 2) = 640px + ((1536px - 640px) / 2) = 1088px
You can see why changing
screenMin
andscreenMax
will change thevw
values. -
Then simply gets the proportion between
12px
and1088px
:vw = (val * 100) / avgScreen = (12px * 100) / 1088px = 1.1029vw
-
Clamp is calculated with proportion of this
vw
value andminScreen
ormaxScreen
, like this:clampMin = (vw * minScreen) / 100 = (1.1029vw * 640px) / 100 = 7.0588px = 7px
clampMax = (vw * maxScreen) / 100 = (1.1029vw * 1536px) / 100 = 16.9405px = 16px
Also plugin removes float point from this value so
px
are always exact. I didn't notice any visible transition betweenvw
andpx
values. -
Final result is this:
font-size: clamp(7px, 1.1029vw, 16px)
or if you set
useClamp
tofalse
:font-size: 1.1029vw