Add support for other units beside rem

Author: davidhellmann

README.md

@@ -44,7 +44,7 @@ Nothing changed here to the default tailwindcss configuration:
 ```
 
 ## 👉🏻 Configuration
-The plugin comes with a default configuration (see below) but it's possible to customize this config for your project:
+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`:
 ```js
 // tailwind.config.js
 module.exports = {
@@ -58,7 +58,8 @@ module.exports = {
       ratioMin: 1.125, // Multiplicator Min
       ratioMax: 1.2, // Multiplicator Max
       screenMin: 20, // 20rem === 320px
-      screenMax: 96 // 96rem === 1536px
+      screenMax: 96, // 96rem === 1536px
+      unit: 'rem' // default is rem but it's also possible to use 'px'
     },
     // Creates the text-xx classes
     // This are the default settings and analog to the tailwindcss defaults

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-fluid-type",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Bring fluid type to tailwindcss",
   "main": "src/index.js",
   "license": "MIT",

src/index.js

@@ -3,7 +3,12 @@ const plugin = require('tailwindcss/plugin')
 module.exports = plugin(
     function ({ addComponents, theme, variants, e }) {
         const values = theme('fluidType');
-        const settingsAreNumbers = Object.values(theme('fluidTypeSettings')).every(value => typeof value === 'number')
+        const settingsAsArray = Object.entries(theme('fluidTypeSettings'));
+        const settingsAsArrayFiltered = settingsAsArray.filter(([key, value]) => key !== 'unit');
+        const finalSettings = Object.fromEntries(settingsAsArrayFiltered);
+        const settingsAreNumbers = Object
+            .values(finalSettings)
+            .every(value => typeof value === 'number')
 
         const calcModularScale = (value = 0) => {
             if (settingsAreNumbers) {
@@ -13,11 +18,12 @@ module.exports = plugin(
                 const sFtRMax = theme('fluidTypeSettings.ratioMax');
                 const sFtSMin = theme('fluidTypeSettings.screenMin');
                 const sFtSMax = theme('fluidTypeSettings.screenMax');
+                const sFtUnit = typeof theme('fluidTypeSettings.unit') === 'string' ? theme('fluidTypeSettings.unit') : 'rem';
                 const ftMin = sFtMin * Math.pow(sFtRMin, value);
                 const ftMax = sFtMax * Math.pow(sFtRMax, value);
-                return `clamp(${ftMin}rem, 
-                calc(${ftMin}rem + (${ftMax} - ${ftMin}) * ((100vw - ${sFtSMin}rem) / (${sFtSMax} - ${sFtSMin}))), 
-                ${ftMax}rem)`;
+                return `clamp(${ftMin}${sFtUnit},
+                calc(${ftMin}${sFtUnit} + (${ftMax} - ${ftMin}) * ((100vw - ${sFtSMin}${sFtUnit}) / (${sFtSMax} - ${sFtSMin}))),
+                ${ftMax}${sFtUnit})`;
             }
             return value;
         };
@@ -43,7 +49,8 @@ module.exports = plugin(
                 ratioMin: 1.125,
                 ratioMax: 1.2,
                 screenMin: 20,
-                screenMax: 96
+                screenMax: 96,
+                unit: 'rem'
             },
             fluidType: {
                 'xs': -2,
@@ -65,4 +72,4 @@ module.exports = plugin(
             fluidType: ['responsive'],
         },
     }
-)
+)