
Security News
Crates.io Implements Trusted Publishing Support
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
tailwind-smart-fluid
Advanced tools
Generate fluid spacing within tailwind using CSS clamp and viewport units
Tailwind plugin that provides smart fluid spacing and typography using CSS clamp
and viewport units.
This is currently experimental, and hasn't been fully tested. Use at your own risk
Install the plugin from npm:
npm install -D tailwind-smart-fluid
Then add the plugin to your tailwind.config.js
file:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwind-smart-fluid'),
// ...
],
}
This plugin uses Just In Time (JIT) to generate fluid version values for all spacing utilities.
In its simplest form, add the class fl-px-[20px,64px]
, where in this case 20px
is the size at the minimum configured viewport (theme.fluid.min
) and 64px
is the size at the maximum configured viewport (theme.fluid.max
).
<div class="fl-py-[20px,64px]"></div>
<!-- generates css like this: -->
<style>
.fl-py-\[20px\2c 64px\] {
padding-bottom: clamp(1.25rem,calc(4.13vw + 0.28rem),4rem);
padding-top: clamp(1.25rem,calc(4.13vw + 0.28rem),4rem);
}
</style>
You can also specify custom viewports, with fl-px-[20px@400px,64px@1440px]
. In this example, when the screen is smaller than 400px
the padding is 20px
, when the screen is above 1440px
it's 64px
. Between these it will scale with the viewport width.
px
;You can configure the default min and max viewport and whether the plugin should convert breakpoint units under the fluid
key in your tailwind.config.js
file:
// tailwind.config.js
module.exports = {
theme: {
fluid: {
min: '400px',
max: '1440px',
convertUnit: true,
// change if you use rem and the equivalent font-size on your html element is not 16px
rootFontSize: '16px'
}
}
}
Property | Default | Notes |
---|---|---|
min | 576px | Minimum viewport when not specified |
max | 1024px | Maximum viewport when not specified |
convertUnits | true | Should the plugin try to convert breakpoint units |
rootFontSize | 16px | Base font-size for converting between rem and px |
custom | [] | Custom utilities to add in name: [properties] format |
By default Tailwind Smart Fluid generates fluid versions of all default Tailwind spacing utilities.
It also adds a custom property that can be used for more complex situations—used with fl-var-[]
and the --fluid-val
property. This could be used within other property values or extended to other CSS functions.
If this doesn't meet your needs, you can also specify your own utilities in theme.fluid.extend
:
// tailwind.config.js
module.exports = {
theme: {
fluid: {
custom: {
// specify properties to assign in an array, this will add the 'fl-flow-[]' utility
'flow': ['--flow-space'],
// for advanced use, provide a function to format your own properties
'min-padding-x': value => ({
'padding-left': `min(var(--min), ${value})`,
'padding-right': `min(var(--min), ${value})`
})
}
}
}
}
0.3.0
— 29/06/22 — Added default --fluid-val
custom property, ability to extend utilities and functional utilities0.2.3
— 17/06/22 — Fixed clamp output when second parameter is lower than first0.2.2
— 16/06/22 — Removed redundant console.log
0.2.1
— 16/06/22 — Fixed default config not loading and some utilities not generating properly0.2.0
— 16/06/22 — Changed prefix to fl-
0.1.0
— 10/06/22 — Initial releaseThis project is licensed under the Apache-2.0 license.
Copyright © 2022 Alistair Shepherd.
FAQs
Generate fluid spacing within tailwind using CSS clamp and viewport units
The npm package tailwind-smart-fluid receives a total of 1 weekly downloads. As such, tailwind-smart-fluid popularity was classified as not popular.
We found that tailwind-smart-fluid demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
Research
/Security News
Undocumented protestware found in 28 npm packages disrupts UI for Russian-language users visiting Russian and Belarusian domains.
Research
/Security News
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.