tailwindcss-fluid
Fluid utilities for Tailwind CSS
Install
npm install --save-dev tailwindcss-fluid
Usage
Add the plugin to your Tailwind configuration:
// tailwind.js
module.exports = {
// ...
plugins: [
require('tailwindcss-fluid')({
// settings
})
]
}Settings
You define which class names will be generated much like you do in the core Tailwind configuration. The difference is that each variant (e.g. sm, md, lg etc.) has four properties: min, max, minvw, and maxvw:
{
textSizes: {
sm: {
min: '14px',
max: '20px',
minvw: '320px',
maxvw: '1400px'
}
}
}The above settings will generate one new utility class, .text-sm-fluid:
.text-sm-fluid {
font-size: 14px;
}
@media (min-width: 320px) {
.text-sm-fluid {
font-size: calc(14px + 6 * (100vw - 320px) / 1080);
}
}
@media (min-width: 1400px) {
.text-sm-fluid {
font-size: 20px;
}
}Supported properties
textSizes, fontWeights, leading, tracking, borderWidths, borderRadius, width, height, minWidth, minHeight, maxWidth, maxHeight, padding, margin, negativeMargin, zIndex, opacity
Setting your values in the core Tailwind config
If you set a property to true it will take the settings from your core config (e.g. module.exports.textSizes):
{
textSizes: true
}Note: In this case you will probably want to disable the core textSizes module
Non-fluid values
You can generate non-fluid utilities by defining a single value, like you would normally. This is useful if you want fluid and non-fluid values defined in the same place:
{
textSizes: {
sm: '14px',
md: {
min: '16px',
max: '22px',
minvw: '320px',
maxvw: '1280px'
}
}
}Suffix
By default all generated class names will end with -fluid. You can override this behaviour with the suffix setting:
{
suffix: '', // default: '-fluid'
}Example
Here is an example of using tailwindcss-fluid for all of your (fluid and non-fluid) font-size utilities:
// tailwind.js
module.exports = {
// ...
textSizes: {
sm: '14px',
md: {
min: '16px',
max: '20px',
minvw: '320px',
maxvw: '1280px'
},
lg: {
min: '26px',
max: '40px',
minvw: '320px',
maxvw: '1280px'
}
},
// ...
modules: {
// ...
textSizes: false // disable the core module
// ...
},
plugins: [
require('tailwindcss-fluid')({
suffix: '',
textSizes: true // use the settings defined the core config (above)
})
]
}This configuration will produce three font-size utility classes: text-sm, text-md, and text-lg.