Fluid utilities for Tailwind CSS

  • By Brad Cornes
  • Last update: Oct 23, 2022
  • Comments: 6

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.

Links

Github

https://github.com/bradlc/tailwindcss-fluid

Comments(6)

  • 1

    Doubled prefixed classnames

    First of all: I love your plugin... ;-) Thank you so much for sharing! But there is a small issue. Maybe you can help.

    I use a custom prefix in tailwinds config file

    options: {
  prefix: 'dhl-',
  important: false,
  separator: ':',
},

    But with this your plugin generates classnames with doubled prefixes

    .dhl-dhl-text-sm-fluid {
  font-size: 14px;
}

@media (min-width: 320px) {
  .dhl-dhl-text-sm-fluid {
    font-size: calc(12.22222px + 0.55556vw);
  }
}

@media (min-width: 1400px) {
  .dhl-dhl-text-sm-fluid {
    font-size: 20px;
  }
}

    Am I doing something wrong?

  • 2

    Output as utilities

    Hey @bradlc, I noticed something else.

    Wouldn't it better to set the output of the plugin as utilities? Now the output is set as component. But the plugin doesn't build components like a button or card.

    What do you think?

  • 3

    Bump loader-utils and postcss-modules

    Bumps loader-utils and postcss-modules. These dependencies needed to be updated together. Updates loader-utils from 0.2.17 to 1.4.1

    Release notes

    Sourced from loader-utils's releases.

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    v1.4.0

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    v1.3.0

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    v1.2.3

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    v1.2.2

    1.2.2 (2018-12-27)

    Bug Fixes

    • fixed a hash type extracting in interpolateName (#137) (f8a71f4)

    v1.2.1

    1.2.1 (2018-12-25)

    ... (truncated)

    Changelog

    Sourced from loader-utils's changelog.

    1.4.1 (2022-11-07)

    Bug Fixes

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    1.2.2 (2018-12-27)

    Bug Fixes

    • fixed a hash type extracting in interpolateName (#137) (f8a71f4)

    1.2.1 (2018-12-25)

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by evilebottnawi, a new releaser for loader-utils since your current version.


    Updates postcss-modules from 1.1.0 to 1.5.0

    Changelog

    Sourced from postcss-modules's changelog.

    1.5.0

    1.4.1

    • Rebublished the previous release. Sorry :(

    1.4.0

    1.3.1

    1.3.0

    • Updated dependecies
    • Added prettier to format code

    1.2.0

    Commits

    Dependabot 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 rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will 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 version will 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 dependency will 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 labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 4

    Error – textSizes vs. fontSize

    Appreciate it's early doors with Tailwind 1.0.0-beta.3!

    The new key for textSizes in Tailwind 1.0.0-beta.3 is fontSize, which seems to cause it to error now:

    TypeError: Cannot convert undefined or null to object at Function.keys (<anonymous>) at /Users/andyfitch/Code/flatsites/all-dogs-new-tricks/node_modules/tailwindcss-fluid/dist/index.js:1:1293 at Array.forEach (<anonymous>) at /Users/andyfitch/Code/flatsites/all-dogs-new-tricks/node_modules/tailwindcss-fluid/dist/index.js:1:1240 at plugins.forEach.plugin (/Users/andyfitch/Code/flatsites/all-dogs-new-tricks/node_modules/tailwindcss/lib/util/processPlugins.js:45:5) at Array.forEach (<anonymous>) at _default (/Users/andyfitch/Code/flatsites/all-dogs-new-tricks/node_modules/tailwindcss/lib/util/processPlugins.js:44:11) at /Users/andyfitch/Code/flatsites/all-dogs-new-tricks/node_modules/tailwindcss/lib/processTailwindFeatures.js:33:58 at LazyResult.run (/usr/local/lib/node_modules/postcss-cli/node_modules/postcss/lib/lazy-result.js:295:14) at LazyResult.asyncTick (/usr/local/lib/node_modules/postcss-cli/node_modules/postcss/lib/lazy-result.js:208:26) npm ERR! code ELIFECYCLE

  • 5

    FR: Poly Fluid Sizing

    I love the idea of fluid design for typograhpy, containers etc. However, I've found myself limited by only having one min and max value. I've been playing around with the approach called Poly Fluid Sizing presented in this article. Is this possible to implement?

  • 6

    Classes cannot be used by @apply

    If I try to use the plugin classes with @apply in a css file I get an error message

    CssSyntaxError: /Applications/MAMP/htdocs/dhl-adressen-4/00_dev/src/css/comp onents/headlines.css:46:3: `@apply` cannot be used with `.dhl-text-3x-fluid` because `.dhl-text-3x-fluid` either cannot be found, or it's actual definit ion includes a pseudo-selector like :hover, :active, etc. If you're sure tha t `.dhl-text-3x-fluid` exists, make sure that any `@import` statements are b eing properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

Popular Tag

Related