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.