👉🏻 tailwindcss-fluid-type
A plugin that makes the use of Fluid Type a breeze.
👉🏻 Installation
Install the plugin from npm:
# Using npm
npm install tailwindcss-fluid-type
# Using Yarn
yarn add tailwindcss-fluid-type
Then add the plugin to your tailwind.config.js file and do your settings if you're not happy with the defaults:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
// You can disable the fontSize core plugin if you don't need the defaults.
// If you don't disable it, the fluid-type plugin simply overrule the defaults.
// Or you can use both alongside when you set an prefix in the settings
corePlugins: {
fontSize: false,
// ...
},
plugins: [
require('tailwindcss-fluid-type'),
// ...
],
};
👉🏻 Usage
Nothing changed here to the default tailwindcss configuration:
<article>
<h1 class="text-xl">Fluid type</h1>
</article>
👉🏻 Configuration
The plugin comes with a default configuration (see below) but it's possible to customize this config for your project. As default, we use rem for better accessibility, but you can also use px.
Default configuration
// tailwind.config.js
module.exports = {
theme: {
fluidType: {
// your fluid type settings
// works only with unitless numbers
// This numbers are the defaults settings
settings: {
fontSizeMin: 1.125, // 1.125rem === 18px
fontSizeMax: 1.25, // 1.25rem === 20px
ratioMin: 1.125, // Multiplicator Min
ratioMax: 1.2, // Multiplicator Max
screenMin: 20, // 20rem === 320px
screenMax: 96, // 96rem === 1536px
unit: 'rem', // default is rem but it's also possible to use 'px'
prefix: '' // set a prefix to use it alongside the default font sizes
},
// Creates the text-xx classes
// This are the default settings and analog to the tailwindcss defaults
// Each `lineHeight` is set unitless and we think that's the way to go especially in context with fluid type.
values: {
'xs': [-2, 1.6],
'sm': [-1, 1.6],
'base': [0, 1.6],
'lg': [1, 1.6],
'xl': [2, 1.2],
'2xl': [3, 1.2],
'3xl': [4, 1.2],
'4xl': [5, 1.1],
'5xl': [6, 1.1],
'6xl': [7, 1.1],
'7xl': [8, 1],
'8xl': [9, 1],
'9xl': [10, 1],
}
},
},
variants: {
fluidType: ['responsive']
}
};
Fluid type configuration without lineHeight
It is also possible to set just the fontSize without set the lineHeight
// tailwind.config.js
module.exports = {
theme: {
fluidType: {
values: {
// ...
'base': 0,
// ...
}
}
}
};
Fluid type configuration with lineHeight & letterSpacing
And yes, you can also set the letterSpacing & lineHeight as you know from the tailwind documentation. letterSpacing can be all values that you like.
// tailwind.config.js
module.exports = {
theme: {
fluidType: {
values: {
// ...
'base': [0,
{
lineHeight: 1.6,
letterSpacing: '-0.1rem',
}
],
// ...
}
}
}
};
👉🏻 Samples
Just set the fontSize property
// tailwind.config.js
module.exports = {
theme: {
fluidType: {
settings: {
fontSizeMin: 1.125,
fontSizeMax: 1.25,
ratioMin: 1.125,
ratioMax: 1.2,
screenMin: 20,
screenMax: 96,
unit: 'rem',
prefix: ''
},
values: {
// ...
'base': 0,
// ...
}
}
}
};
<p class="text-base">The quick brown fox jumps over the lazy dogs</p>
.text-base {
font-size: clamp(1.125rem, calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))), 1.25rem);
}
Set the fontSize & lineHeight property
// tailwind.config.js
module.exports = {
theme: {
fluidType: {
settings: {
fontSizeMin: 1.125,
fontSizeMax: 1.25,
ratioMin: 1.125,
ratioMax: 1.2,
screenMin: 20,
screenMax: 96,
unit: 'rem',
prefix: ''
},
values: {
// ...
'base': [0, 1.6],
// ...
}
}
}
};
<p class="text-base">The quick brown fox jumps over the lazy dogs</p>
.text-base {
font-size: clamp(1.125rem, calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))), 1.25rem);
line-height: 1.6;
}
Set the fontSize, lineHeight & letterSpacing property
// tailwind.config.js
module.exports = {
theme: {
fluidType: {
settings: {
fontSizeMin: 1.125,
fontSizeMax: 1.25,
ratioMin: 1.125,
ratioMax: 1.2,
screenMin: 20,
screenMax: 96,
unit: 'rem',
prefix: '',
},
values: {
// ...
'base': [0, {
lineHeight: 1.6,
letterSpacing: '-0.1rem',
}],
// ...
}
}
}
};
<p class="text-base">The quick brown fox jumps over the lazy dogs</p>
.text-base {
font-size: clamp(1.125rem, calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))), 1.25rem);
line-height: 1.6;
letter-spacing: -0.1rem;
}
Set a value as string
// tailwind.config.js
module.exports = {
theme: {
extend: {
fluidType: {
values: {
// ...
'2xs': '11px',
// ...
}
}
}
}
};
<p class="text-2xs">The quick brown fox jumps over the lazy dogs</p>
.text-2xs {
font-size: 11px;
}
Set a prefix
// tailwind.config.js
module.exports = {
theme: {
extend: {
fluidType: {
settings: {
// ...
prefix: 'fluid-',
},
}
}
}
};
<p class="fluid-text-base">The quick brown fox jumps over the lazy dogs</p>
.fluid-text-base {
font-size: clamp(1.125rem, calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))), 1.25rem);
line-height: 1.6;
letter-spacing: -0.1rem;
}
Is there a way to access the final font-size values for use elsewhere in CSS?
For instance with the core fontSize plugin, I can do this:
...but since the fluid type plugin calculates the final values at build time, that doesn't work.
I realize I could use @apply in a lot of cases, but it would be useful to have direct access to the values.
Support for Padding, Margin?
Hi, thank you very much for creating this plugin. I know that this plugin was developed mainly for the font size. Would there still be the possibility to support padding and margin as well? That would be pretty handy, since the configuration would only need to be set once.
Tailwind CSS Vesion 3 Breaking Change
Upon upgrade to Tailwind CSS v.3.0, the following import is now breaking within tailwind.config.js: require('tailwindcss-fluid-type');. Package.json has been updated to Tailwind v3.0.
Demo also breaks when chaning the Tailwind version to 3.0: https://play.tailwindcss.com/3LDf3gzbhb
Side Note: Thanks for your awesome work on this plugin. We absolutely love it.
Why require scales to be integers?
I see you are doing checks to see whether the values are integers and if they are - returning the value instead of calculating the modular scale. Why is this? Would be nice to have
x.5scales or any arbitrary scale. If I submitted a PR would you accept it?Clamp structure invalid property value
After installing the package and setting it up through the tailwind config it was creating the font size as following : font-size: clamp(20px) calc(20px + (30 - 20) * ((100vw - 320px) / (1230 - 320))), 30px);
It works perfectly fine whenever I change the value within the inspector tool : font-size: clamp(20px, calc(20px + (30 - 20) * ((100vw - 320px) / (1230 - 320))), 30px);
My tailwind setup :
After digging around in the index.js I changed line 56 - 58 into 1 complete line : Before :
After :
This generated the right value for me.
Did I do something wrong or has this occurred before? Thanks in advance
build(deps): bump minimatch from 3.0.4 to 3.1.2
Bumps minimatch from 3.0.4 to 3.1.2.
Commits
699c4593.1.22f2b5fffix: trim pattern25d7c0d3.1.155dda29fix: treat nocase:true as always having magic5e1fb8d3.1.0f8145c5Add 'allowWindowsEscape' option570e8b1add publishConfig for v3 publishes5b7cd333.0.620b4b56[fix] revert all breaking syntax changes2ff0388document, expose, and test 'partial:true' optionDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebasewill rebase this PR@dependabot recreatewill recreate this PR, overwriting any edits that have been made to it@dependabot mergewill merge this PR after your CI passes on it@dependabot squash and mergewill squash and merge this PR after your CI passes on it@dependabot cancel mergewill cancel a previously requested merge and block automerging@dependabot reopenwill reopen this PR if it is closed@dependabot closewill close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major versionwill close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor versionwill close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependencywill close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labelswill set the current labels as the default for future PRs for this repo and language@dependabot use these reviewerswill set the current reviewers as the default for future PRs for this repo and language@dependabot use these assigneeswill set the current assignees as the default for future PRs for this repo and language@dependabot use this milestonewill set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Fluid paddings, margins, etc. possible?
Hello there,
First of all — thank you for this plugin! <3
I'm asking myself how to deal with text that acts as button label, etc. For most of my projekts that would look like:
In this case I'd would like to have the padding as a fluid as well to keep proportions. I found a workaround by setting the padding to an arbitrary like
p-[0.25em]but I'm sure theres better ways...All the best from Berlin, Hans
Bump minimist from 1.2.5 to 1.2.6
Bumps minimist from 1.2.5 to 1.2.6.
Commits
7efb22a1.2.6ef88b93security notice for additional prototype pollution issuec2b9819isConstructorOrProto adapted from PRbc8eceetest from prototype pollution PRDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebasewill rebase this PR@dependabot recreatewill recreate this PR, overwriting any edits that have been made to it@dependabot mergewill merge this PR after your CI passes on it@dependabot squash and mergewill squash and merge this PR after your CI passes on it@dependabot cancel mergewill cancel a previously requested merge and block automerging@dependabot reopenwill reopen this PR if it is closed@dependabot closewill close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major versionwill close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor versionwill close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependencywill close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labelswill set the current labels as the default for future PRs for this repo and language@dependabot use these reviewerswill set the current reviewers as the default for future PRs for this repo and language@dependabot use these assigneeswill set the current assignees as the default for future PRs for this repo and language@dependabot use this milestonewill set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
dependency issues with [email protected]
Hi there,
just wanted to drop a note that I wanted to try your pluging and run it with the latest alpha and it would not install properly:
npm resolution error report
2021-12-08T10:20:58.372Z
While resolving: [email protected] Found: [email protected] node_modules/tailwindcss dev [email protected]"^3.0.0-alpha.2" from the root project
Could not resolve dependency: peer [email protected]">=2.0.0" from [email protected] node_modules/tailwindcss-fluid-type [email protected]"*" from the root project
Fix the upstream dependency conflict, or retry this command with --force, or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.
Thanks
Best Regards
Marc
Bump nanoid from 3.1.30 to 3.2.0
Bumps nanoid from 3.1.30 to 3.2.0.
Changelog
Sourced from nanoid's changelog.
Commits
23b1369Release 3.2 version967788eRemove TS test tools27eaa90Simplify new binary toola9d9123Update dependencies32b9bdaAllows passing size or custom alphabet via cli as args (#334)246d5f8Update viteafdf9c9doc: Fixed Typo (#335)90a446fUpdate benchmark results8ba2319bench: add@napi-rs/uuidv4 (#333)f425778Release 3.1.32 versionDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebasewill rebase this PR@dependabot recreatewill recreate this PR, overwriting any edits that have been made to it@dependabot mergewill merge this PR after your CI passes on it@dependabot squash and mergewill squash and merge this PR after your CI passes on it@dependabot cancel mergewill cancel a previously requested merge and block automerging@dependabot reopenwill reopen this PR if it is closed@dependabot closewill close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major versionwill close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor versionwill close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependencywill close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labelswill set the current labels as the default for future PRs for this repo and language@dependabot use these reviewerswill set the current reviewers as the default for future PRs for this repo and language@dependabot use these assigneeswill set the current assignees as the default for future PRs for this repo and language@dependabot use this milestonewill set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.