twin.macro/macro.js

Twin blends the magic of Tailwind with the flexibility of css-in-js

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var babylon = _interopDefault(require('@babel/parser'));
var get = _interopDefault(require('lodash.get'));
var createColor = _interopDefault(require('color'));
var chalk = _interopDefault(require('chalk'));
var path = require('path');
var fs = require('fs');
var resolveTailwindConfig = _interopDefault(require('tailwindcss/lib/util/resolveConfig'));
var defaultTailwindConfig = _interopDefault(require('tailwindcss/stubs/defaultConfig.stub'));
var flatMap = _interopDefault(require('lodash.flatmap'));
var template = _interopDefault(require('@babel/template'));
var cleanSet = _interopDefault(require('clean-set'));
var timSort = _interopDefault(require('timsort'));
var babelPluginMacros = require('babel-plugin-macros');
var stringSimilarity = _interopDefault(require('string-similarity'));
var processPlugins = _interopDefault(require('tailwindcss/lib/util/processPlugins'));
var deepMerge = _interopDefault(require('lodash.merge'));

var throwIf = function (expression, callBack) {
  if (!expression) { return; }
  throw new babelPluginMacros.MacroError(callBack());
};

var isEmpty = function (value) { return value === undefined || value === null || typeof value === 'object' && Object.keys(value).length === 0 || typeof value === 'string' && value.trim().length === 0; };

var addPxTo0 = function (string) { return Number(string) === 0 ? (string + "px") : string; };

function transformThemeValue(themeSection) {
  if (['fontSize', 'outline'].includes(themeSection)) {
    return function (value) { return Array.isArray(value) ? value[0] : value; };
  }

  if (['fontFamily', 'boxShadow', 'transitionProperty', 'transitionDuration', 'transitionDelay', 'transitionTimingFunction', 'backgroundImage', 'backgroundSize', 'backgroundColor', 'cursor', 'animation'].includes(themeSection)) {
    return function (value) { return Array.isArray(value) ? value.join(', ') : value; };
  }

  if (themeSection === 'colors') {
    return function (value) { return typeof value === 'function' ? value({}) : value; };
  }

  return function (value) { return value; };
}

var objectToStringValues = function (obj) {
  if (typeof obj === 'object' && !Array.isArray(obj)) { return Object.entries(obj).reduce(function (result, ref) {
    var obj;

    var key = ref[0];
    var value = ref[1];
    return deepMerge(result, ( obj = {}, obj[key] = objectToStringValues(value), obj ));
    }, {}); }
  if (Array.isArray(obj)) { return obj.map(function (i) { return objectToStringValues(i); }); }
  if (typeof obj === 'number') { return String(obj); } // typeof obj = string / function

  return obj;
};

var getTheme = function (configTheme) { return function (grab) {
  if (!grab) { return configTheme; } // Allow theme`` which gets supplied as an array

  var value = Array.isArray(grab) ? grab[0] : grab; // Get the theme key so we can apply certain rules in transformThemeValue

  var themeKey = value.split('.')[0]; // Get the resulting value from the config

  var themeValue = get(configTheme, value);
  return objectToStringValues(transformThemeValue(themeKey)(themeValue));
}; };

var stripNegative = function (string) { return string && string.length > 1 && string.slice(0, 1) === '-' ? string.slice(1, string.length) : string; };

var camelize = function (string) { return string && string.replace(/\W+(.)/g, function (_, chr) { return chr.toUpperCase(); }); };

var isNumeric = function (str) {
  /* eslint-disable-next-line eqeqeq */
  if (typeof str != 'string') { return false; }
  return !Number.isNaN(str) && !Number.isNaN(Number.parseFloat(str));
};

var isClass = function (str) { return new RegExp(/(\s*\.|{{)\w/).test(str); };

var isMediaQuery = function (str) { return str.startsWith('@media'); };

var isShortCss = function (className) { return new RegExp(/[^/-]\[/).test(className); };

var isArbitraryCss = function (className) { return new RegExp(/-\[/).test(className); }; // Split a string at a value


function splitOnFirst(input, delim) {
  return (function (ref) {
    var first = ref[0];
    var rest = ref.slice(1);

    return [first, rest.join(delim)];
  })(input.split(delim));
}

function hasAlpha(color) {
  return color.startsWith('rgba(') || color.startsWith('hsla(') || color.startsWith('#') && color.length === 9 || color.startsWith('#') && color.length === 5;
}

function toRgba(color) {
  var ref = createColor(color).rgb().array();
  var r = ref[0];
  var g = ref[1];
  var b = ref[2];
  var a = ref[3];
  return [r, g, b, a === undefined && hasAlpha(color) ? 1 : a];
}

function toHsla(color) {
  var ref = createColor(color).hsl().array();
  var h = ref[0];
  var s = ref[1];
  var l = ref[2];
  var a = ref[3];
  return [h, s, l, a === undefined && hasAlpha(color) ? 1 : a];
}

var toPercent = function (value) { return value > 0 ? (value + "%") : value; };

var colorMap = {
  hsl: function (color) {
    var ref = toHsla(color);
    var h = ref[0];
    var s = ref[1];
    var l = ref[2];
    var a = ref[3];
    return {
      values: [h, toPercent(s), toPercent(l)].join(', '),
      alpha: a,
      prefix: a ? 'hsla' : 'hsla',
      alphaPrefix: 'hsla'
    };
  },
  rgb: function (color) {
    var ref = toRgba(color);
    var r = ref[0];
    var g = ref[1];
    var b = ref[2];
    var a = ref[3];
    return {
      values: [r, g, b].join(', '),
      alpha: a,
      prefix: a ? 'rgba' : 'rgba',
      alphaPrefix: 'rgba'
    };
  }
};

var makeColorValue = function (color) {
  var type = color.slice(0, 3);
  var colorType = colorMap[type] || colorMap.rgb;
  var alphaValue;

  var colorValue = function (ref) {
    var a = ref.a;

    var ref$1 = colorType(color);
    var alphaPrefix = ref$1.alphaPrefix;
    var prefix = ref$1.prefix;
    var values = ref$1.values;
    var alpha = ref$1.alpha;
    alphaValue = alpha !== undefined ? alpha : a;
    var finalColor = [values, alphaValue].filter(function (i) { return i !== undefined; });
    var finalPrefix = alphaValue !== undefined ? alphaPrefix : prefix;
    return (finalPrefix + "(" + (finalColor.join(', ')) + ")");
  };

  return [colorValue, alphaValue];
};

var withAlpha = function (ref) {
  var obj, obj$1, obj$2, obj$3, obj$4, obj$5;

  var color = ref.color;
  var property = ref.property;
  var variable = ref.variable;
  var pieces = ref.pieces; if ( pieces === void 0 ) pieces = {};
  var useSlashAlpha = ref.useSlashAlpha; if ( useSlashAlpha === void 0 ) useSlashAlpha = variable ? !variable : true;
  var hasFallback = ref.hasFallback; if ( hasFallback === void 0 ) hasFallback = true;
  if (!color) { return; } // Validate the slash opacity and show an error that was generated earlier

  throwIf(useSlashAlpha && pieces.alphaError, pieces.alphaError);

  if (typeof color === 'function') {
    if (variable && property) {
      var value = color({
        opacityVariable: variable,
        opacityValue: ("var(" + variable + ")")
      });
      return ( obj = {}, obj[variable] = '1', obj[property] = value, obj );
    }

    color = color({
      opacityVariable: variable
    });
  }

  if (!property && !useSlashAlpha) { return ("" + color + (pieces.important)); }

  try {
    var ref$1 = makeColorValue(color);
    var colorValue = ref$1[0];
    var a = ref$1[1];

    if (!useSlashAlpha) {
      if (!variable || color.startsWith('var(')) // a !== undefined ||
        { return ( obj$1 = {}, obj$1[property] = ("" + color + (pieces.important)), obj$1 ); }
      var value$1 = colorValue({
        a: ("var(" + variable + ")")
      });
      return Object.assign({}, (value$1.includes('var(') && ( obj$2 = {}, obj$2[variable] = '1', obj$2 )),
        ( obj$3 = {}, obj$3[property] = ("" + value$1 + (pieces.important)), obj$3 ));
    }

    var value$2 = "" + (pieces.hasAlpha && colorValue({
      a: pieces.alpha
    }) || a && colorValue() || colorValue()) + (pieces.important);
    return property ? ( obj$4 = {}, obj$4[property] = value$2, obj$4 ) : value$2;
  } catch (_) {
    if (!hasFallback) { return; }
    return ( obj$5 = {}, obj$5[property] = ("" + color + (pieces.important)), obj$5 );
  }
};

var transparentTo = function (value) {
  if (typeof value === 'function') {
    value = value({
      opacityValue: 0
    });
  }

  try {
    var ref = toRgba(value);
    var r = ref[0];
    var g = ref[1];
    var b = ref[2];
    return ("rgba(" + r + ", " + g + ", " + b + ", 0)");
  } catch (_) {
    return "rgba(255, 255, 255, 0)";
  }
};

var dynamicStyles = {
  /**
   * ===========================================
   * Layout
   */
  // https://tailwindcss.com/docs/animation
  animate: {
    prop: 'animation',
    plugin: 'animation'
  },
  // https://tailwindcss.com/docs/container
  container: {
    hasArbitrary: false,
    plugin: 'container'
  },
  // https://tailwindcss.com/docs/just-in-time-mode#content-utilities
  content: {
    prop: 'content'
  },
  // https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
  caret: {
    plugin: 'caretColor',
    value: ['color'],
    coerced: {
      color: function (value) { return ({
        caretColor: value
      }); }
    }
  },
  // https://tailwindcss.com/docs/box-sizing
  // https://tailwindcss.com/docs/display
  // https://tailwindcss.com/docs/float
  // https://tailwindcss.com/docs/clear
  // https://tailwindcss.com/docs/object-fit
  // See staticStyles.js
  // https://tailwindcss.com/docs/object-position
  object: {
    prop: 'objectPosition',
    config: 'objectPosition'
  },
  // https://tailwindcss.com/docs/overflow
  // https://tailwindcss.com/docs/position
  // See staticStyles.js
  // https://tailwindcss.com/docs/top-right-bottom-left
  top: {
    prop: 'top',
    config: 'inset'
  },
  bottom: {
    prop: 'bottom',
    config: 'inset'
  },
  right: {
    prop: 'right',
    config: 'inset'
  },
  left: {
    prop: 'left',
    config: 'inset'
  },
  'inset-y': {
    prop: ['top', 'bottom'],
    config: 'inset'
  },
  'inset-x': {
    prop: ['left', 'right'],
    config: 'inset'
  },
  inset: {
    prop: ['top', 'right', 'bottom', 'left'],
    config: 'inset'
  },
  // https://tailwindcss.com/docs/visibility
  // See staticStyles.js
  // https://tailwindcss.com/docs/z-index
  z: {
    prop: 'zIndex',
    config: 'zIndex'
  },
  // https://tailwindcss.com/docs/space
  // space-x-reverse + space-y-reverse are in staticStyles
  'space-y': {
    plugin: 'space',
    value: function (ref) {
      var value = ref.value;

      return ({
      '> :not([hidden]) ~ :not([hidden])': {
        '--tw-space-y-reverse': '0',
        marginTop: ("calc(" + value + " * calc(1 - var(--tw-space-y-reverse)))"),
        marginBottom: ("calc(" + value + " * var(--tw-space-y-reverse))")
      }
    });
}
  },
  'space-x': {
    plugin: 'space',
    value: function (ref) {
      var value = ref.value;

      return ({
      '> :not([hidden]) ~ :not([hidden])': {
        '--tw-space-x-reverse': '0',
        marginRight: ("calc(" + value + " * var(--tw-space-x-reverse))"),
        marginLeft: ("calc(" + value + " * calc(1 - var(--tw-space-x-reverse)))")
      }
    });
}
  },
  // https://tailwindcss.com/docs/divide-width/
  'divide-opacity': {
    prop: '--tw-divide-opacity',
    plugin: 'divide'
  },
  'divide-y': {
    plugin: 'divide',
    value: function (ref) {
      var value = ref.value;

      return ({
      '> :not([hidden]) ~ :not([hidden])': {
        '--tw-divide-y-reverse': '0',
        borderTopWidth: ("calc(" + value + " * calc(1 - var(--tw-divide-y-reverse)))"),
        borderBottomWidth: ("calc(" + value + " * var(--tw-divide-y-reverse))")
      }
    });
}
  },
  'divide-x': {
    plugin: 'divide',
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-divide-x-reverse': '0',
      borderRightWidth: ("calc(" + value + " * var(--tw-divide-x-reverse))"),
      borderLeftWidth: ("calc(" + value + " * calc(1 - var(--tw-divide-x-reverse)))")
    });
}
  },
  divide: {
    plugin: 'divide',
    value: ['color'],
    coerced: {
      color: {
        property: 'borderColor',
        variable: '--tw-divide-opacity',
        useSlashAlpha: false
      }
    }
  },

  /**
   * ===========================================
   * Flexbox
   */
  // https://tailwindcss.com/docs/flex-direction
  // https://tailwindcss.com/docs/flex-wrap
  // https://tailwindcss.com/docs/align-items
  // https://tailwindcss.com/docs/align-content
  // https://tailwindcss.com/docs/align-self
  // https://tailwindcss.com/docs/justify-content
  // See staticStyles.js
  // https://tailwindcss.com/docs/flex-grow
  'flex-grow': {
    prop: 'flexGrow',
    config: 'flexGrow'
  },
  // https://tailwindcss.com/docs/flex-shrink
  'flex-shrink': {
    prop: 'flexShrink',
    config: 'flexShrink'
  },
  // https://tailwindcss.com/docs/flex
  flex: {
    prop: 'flex',
    config: 'flex'
  },
  // https://tailwindcss.com/docs/order
  order: {
    prop: 'order',
    config: 'order'
  },

  /**
   * ===========================================
   * Grid
   */
  // https://tailwindcss.com/docs/grid-template-columns
  'grid-cols': {
    prop: 'gridTemplateColumns',
    config: 'gridTemplateColumns'
  },
  // https://tailwindcss.com/docs/grid-column
  col: {
    prop: 'gridColumn',
    config: 'gridColumn'
  },
  'col-start': {
    prop: 'gridColumnStart',
    config: 'gridColumnStart'
  },
  'col-end': {
    prop: 'gridColumnEnd',
    config: 'gridColumnEnd'
  },
  // https://tailwindcss.com/docs/grid-template-rows
  'grid-rows': {
    prop: 'gridTemplateRows',
    config: 'gridTemplateRows'
  },
  // https://tailwindcss.com/docs/grid-row
  row: {
    prop: 'gridRow',
    config: 'gridRow'
  },
  'row-start': {
    prop: 'gridRowStart',
    config: 'gridRowStart'
  },
  'row-end': {
    prop: 'gridRowEnd',
    config: 'gridRowEnd'
  },
  // https://tailwindcss.com/docs/grid-auto-columns
  'auto-cols': {
    prop: 'gridAutoColumns',
    config: 'gridAutoColumns'
  },
  // https://tailwindcss.com/docs/grid-auto-rows
  'auto-rows': {
    prop: 'gridAutoRows',
    config: 'gridAutoRows'
  },
  // https://tailwindcss.com/docs/gap
  gap: {
    prop: 'gap',
    config: 'gap'
  },
  'gap-x': {
    prop: 'columnGap',
    config: 'gap',
    configFallback: 'spacing'
  },
  'gap-y': {
    prop: 'rowGap',
    config: 'gap',
    configFallback: 'spacing'
  },
  // Deprecated since tailwindcss v1.7.0
  'col-gap': {
    hasArbitrary: false,
    prop: 'columnGap',
    config: 'gap'
  },
  'row-gap': {
    hasArbitrary: false,
    prop: 'rowGap',
    config: 'gap'
  },

  /**
   * ===========================================
   * Spacing
   */
  // https://tailwindcss.com/docs/padding
  pt: {
    prop: 'paddingTop',
    config: 'padding'
  },
  pr: {
    prop: 'paddingRight',
    config: 'padding'
  },
  pb: {
    prop: 'paddingBottom',
    config: 'padding'
  },
  pl: {
    prop: 'paddingLeft',
    config: 'padding'
  },
  px: {
    prop: ['paddingLeft', 'paddingRight'],
    config: 'padding'
  },
  py: {
    prop: ['paddingTop', 'paddingBottom'],
    config: 'padding'
  },
  p: {
    prop: 'padding',
    config: 'padding'
  },
  // https://tailwindcss.com/docs/margin
  mt: {
    prop: 'marginTop',
    config: 'margin'
  },
  mr: {
    prop: 'marginRight',
    config: 'margin'
  },
  mb: {
    prop: 'marginBottom',
    config: 'margin'
  },
  ml: {
    prop: 'marginLeft',
    config: 'margin'
  },
  mx: {
    prop: ['marginLeft', 'marginRight'],
    config: 'margin'
  },
  my: {
    prop: ['marginTop', 'marginBottom'],
    config: 'margin'
  },
  m: {
    prop: 'margin',
    config: 'margin'
  },

  /**
   * ===========================================
   * Sizing
   */
  // https://tailwindcss.com/docs/width
  w: {
    prop: 'width',
    config: 'width'
  },
  // https://tailwindcss.com/docs/min-width
  'min-w': {
    prop: 'minWidth',
    config: 'minWidth'
  },
  // https://tailwindcss.com/docs/max-width
  'max-w': {
    prop: 'maxWidth',
    config: 'maxWidth'
  },
  // https://tailwindcss.com/docs/height
  h: {
    prop: 'height',
    config: 'height'
  },
  // https://tailwindcss.com/docs/min-height
  'min-h': {
    prop: 'minHeight',
    config: 'minHeight'
  },
  // https://tailwindcss.com/docs/max-height
  'max-h': {
    prop: 'maxHeight',
    config: 'maxHeight'
  },

  /**
   * ===========================================
   * Typography
   */
  font: [// https://tailwindcss.com/docs/font-family
  {
    prop: 'fontFamily',
    config: 'fontFamily'
  }, // https://tailwindcss.com/docs/font-weight
  {
    prop: 'fontWeight',
    config: 'fontWeight'
  }],
  // https://tailwindcss.com/docs/font-smoothing
  // https://tailwindcss.com/docs/font-style
  // See staticStyles.js
  // https://tailwindcss.com/docs/letter-spacing
  tracking: {
    prop: 'letterSpacing',
    config: 'letterSpacing'
  },
  // https://tailwindcss.com/docs/line-height
  leading: {
    prop: 'lineHeight',
    config: 'lineHeight'
  },
  // https://tailwindcss.com/docs/list-style-type
  list: {
    prop: 'listStyleType',
    config: 'listStyleType'
  },
  // https://tailwindcss.com/docs/list-style-position
  // See staticStyles.js
  // https://tailwindcss.com/docs/placeholder-opacity
  'placeholder-opacity': {
    plugin: 'placeholder',
    value: function (ref) {
      var value = ref.value;

      return ({
      '::placeholder': {
        '--tw-placeholder-opacity': value
      }
    });
}
  },
  // https://tailwindcss.com/docs/placeholder-color
  placeholder: {
    plugin: 'placeholder',
    value: function (ref) {
      var color = ref.color;

      return ({
      '::placeholder': color({
        property: 'color',
        variable: '--tw-placeholder-opacity',
        useSlashAlpha: false
      })
    });
}
  },
  // https://tailwindcss.com/docs/text-align
  // See staticStyles.js
  // https://tailwindcss.com/docs/text-color
  // https://tailwindcss.com/docs/font-size
  'text-opacity': {
    prop: '--tw-text-opacity',
    config: 'textOpacity',
    configFallback: 'opacity'
  },
  text: {
    value: ['color', 'length'],
    plugin: 'text',
    coerced: {
      color: {
        property: 'color',
        variable: '--tw-text-opacity'
      },
      length: {
        property: 'fontSize'
      }
    }
  },
  // https://tailwindcss.com/docs/text-decoration
  // https://tailwindcss.com/docs/text-transform
  // https://tailwindcss.com/docs/vertical-align
  // https://tailwindcss.com/docs/whitespace
  // https://tailwindcss.com/docs/word-break
  // See staticStyles.js

  /**
   * ===========================================
   * Backgrounds
   */
  // https://tailwindcss.com/docs/background-attachment
  // See staticStyles.js
  // https://tailwindcss.com/docs/background-repeat
  // See staticStyles.js
  // https://tailwindcss.com/docs/background-opacity
  'bg-opacity': {
    prop: '--tw-bg-opacity',
    config: 'backgroundOpacity',
    configFallback: 'opacity'
  },
  // https://tailwindcss.com/docs/gradient-color-stops
  bg: {
    value: ['color'],
    plugin: 'bg',
    coerced: {
      color: {
        property: 'backgroundColor',
        variable: '--tw-bg-opacity',
        useSlashAlpha: false
      },
      lookup: function (value) { return ({
        backgroundImage: value,
        backgroundSize: value,
        backgroundPosition: value
      }); }
    }
  },
  // https://tailwindcss.com/docs/gradient-color-stops
  from: {
    value: function (ref) {
      var value = ref.value;
      var transparentTo = ref.transparentTo;

      return ({
      '--tw-gradient-from': value,
      '--tw-gradient-stops': ("var(--tw-gradient-from), var(--tw-gradient-to, " + (transparentTo(value)) + ")")
    });
},
    plugin: 'gradient'
  },
  via: {
    value: function (ref) {
      var value = ref.value;
      var transparentTo = ref.transparentTo;

      return ({
      '--tw-gradient-stops': ("var(--tw-gradient-from), " + value + ", var(--tw-gradient-to, " + (transparentTo(value)) + ")")
    });
},
    plugin: 'gradient'
  },
  to: {
    prop: '--tw-gradient-to',
    plugin: 'gradient'
  },

  /**
   * ===========================================
   * Borders
   */
  // https://tailwindcss.com/docs/border-style
  // See staticStyles.js
  // https://tailwindcss.com/docs/border-width
  'border-t': {
    value: ['color', 'length'],
    plugin: 'border',
    coerced: {
      color: {
        property: 'borderTopColor',
        variable: '--tw-border-opacity'
      },
      length: {
        property: 'borderTopWidth'
      }
    }
  },
  'border-b': {
    value: ['color', 'length'],
    plugin: 'border',
    coerced: {
      color: {
        property: 'borderBottomColor',
        variable: '--tw-border-opacity'
      },
      length: {
        property: 'borderBottomWidth'
      }
    }
  },
  'border-l': {
    value: ['color', 'length'],
    plugin: 'border',
    coerced: {
      color: {
        property: 'borderLeftColor',
        variable: '--tw-border-opacity'
      },
      length: {
        property: 'borderLeftWidth'
      }
    }
  },
  'border-r': {
    value: ['color', 'length'],
    plugin: 'border',
    coerced: {
      color: {
        property: 'borderRightColor',
        variable: '--tw-border-opacity'
      },
      length: {
        property: 'borderRightWidth'
      }
    }
  },
  'border-opacity': {
    prop: '--tw-border-opacity',
    config: 'borderOpacity',
    configFallback: 'opacity'
  },
  border: {
    value: ['color', 'length'],
    plugin: 'border',
    coerced: {
      color: {
        property: 'borderColor',
        variable: '--tw-border-opacity'
      },
      length: {
        property: 'borderWidth'
      }
    }
  },
  // https://tailwindcss.com/docs/border-radius
  'rounded-tl': {
    prop: 'borderTopLeftRadius',
    config: 'borderRadius'
  },
  'rounded-tr': {
    prop: 'borderTopRightRadius',
    config: 'borderRadius'
  },
  'rounded-br': {
    prop: 'borderBottomRightRadius',
    config: 'borderRadius'
  },
  'rounded-bl': {
    prop: 'borderBottomLeftRadius',
    config: 'borderRadius'
  },
  'rounded-t': {
    prop: ['borderTopLeftRadius', 'borderTopRightRadius'],
    config: 'borderRadius'
  },
  'rounded-r': {
    prop: ['borderTopRightRadius', 'borderBottomRightRadius'],
    config: 'borderRadius'
  },
  'rounded-b': {
    prop: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
    config: 'borderRadius'
  },
  'rounded-l': {
    prop: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
    config: 'borderRadius'
  },
  rounded: {
    prop: 'borderRadius',
    config: 'borderRadius'
  },
  // https://tailwindcss.com/docs/ring-opacity
  'ring-opacity': {
    prop: '--tw-ring-opacity',
    config: 'ringOpacity',
    configFallback: 'opacity'
  },
  // https://tailwindcss.com/docs/ring-offset-width
  // https://tailwindcss.com/docs/ring-offset-color
  'ring-offset': {
    prop: '--tw-ring-offset-width',
    value: ['length', 'color'],
    plugin: 'ringOffset',
    coerced: {
      color: function (value) { return ({
        '--tw-ring-offset-color': value
      }); },
      length: {
        property: '--tw-ring-offset-width'
      }
    }
  },
  // https://tailwindcss.com/docs/ring-width
  // https://tailwindcss.com/docs/ring-color
  ring: {
    plugin: 'ring',
    value: ['color', 'length'],
    coerced: {
      color: {
        property: '--tw-ring-color',
        variable: '--tw-ring-opacity'
      },
      length: function (value) { return ({
        '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
        '--tw-ring-shadow': ("var(--tw-ring-inset) 0 0 0 calc(" + value + " + var(--tw-ring-offset-width)) var(--tw-ring-color)"),
        boxShadow: ["var(--tw-ring-offset-shadow)", "var(--tw-ring-shadow)", "var(--tw-shadow, 0 0 #0000)"].join(', ')
      }); }
    }
  },

  /**
   * ===========================================
   * Tables
   */
  // https://tailwindcss.com/docs/border-collapse
  // https://tailwindcss.com/docs/table-layout
  // See staticStyles.js

  /**
   * ===========================================
   * Effects
   */
  // https://tailwindcss.com/docs/box-shadow
  // Note: Tailwind doesn't allow an arbitrary value but it's likely just an accident so it's been added here
  shadow: {
    plugin: 'boxShadow',
    value: ['lookup'],
    coerced: {
      lookup: function (value) { return ({
        '--tw-shadow': value,
        boxShadow: ["var(--tw-ring-offset-shadow, 0 0 #0000)", "var(--tw-ring-shadow, 0 0 #0000)", "var(--tw-shadow)"].join(', ')
      }); }
    }
  },
  // https://tailwindcss.com/docs/opacity
  opacity: {
    prop: 'opacity',
    config: 'opacity'
  },

  /**
   * ===========================================
   * Filters
   */
  // https://tailwindcss.com/docs/filter
  // See staticStyles.js
  // https://tailwindcss.com/docs/blur
  blur: {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-blur': ("blur(" + value + ")"),
      filter: 'var(--tw-filter)'
    });
},
    plugin: 'blur'
  },
  // https://tailwindcss.com/docs/brightness
  brightness: {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-brightness': ("brightness(" + value + ")"),
      filter: 'var(--tw-filter)'
    });
},
    plugin: 'brightness'
  },
  // https://tailwindcss.com/docs/contrast
  contrast: {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-contrast': ("contrast(" + value + ")"),
      filter: 'var(--tw-filter)'
    });
},
    plugin: 'contrast'
  },
  // https://tailwindcss.com/docs/drop-shadow
  'drop-shadow': {
    hasArbitrary: false,
    plugin: 'dropShadow'
  },
  // https://tailwindcss.com/docs/grayscale
  grayscale: {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-grayscale': ("grayscale(" + value + ")"),
      filter: 'var(--tw-filter)'
    });
},
    plugin: 'grayscale'
  },
  // https://tailwindcss.com/docs/hue-rotate
  'hue-rotate': {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-hue-rotate': ("hue-rotate(" + value + ")"),
      filter: 'var(--tw-filter)'
    });
},
    plugin: 'hueRotate'
  },
  // https://tailwindcss.com/docs/invert
  invert: {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-invert': ("invert(" + value + ")"),
      filter: 'var(--tw-filter)'
    });
},
    plugin: 'invert'
  },
  // https://tailwindcss.com/docs/saturate
  saturate: {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-saturate': ("saturate(" + value + ")"),
      filter: 'var(--tw-filter)'
    });
},
    plugin: 'saturate'
  },
  // https://tailwindcss.com/docs/sepia
  sepia: {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-sepia': ("sepia(" + value + ")"),
      filter: 'var(--tw-filter)'
    });
},
    plugin: 'sepia'
  },
  // https://tailwindcss.com/docs/backdrop-filter
  // https://tailwindcss.com/docs/backdrop-blur
  'backdrop-blur': {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-backdrop-blur': ("blur(" + value + ")"),
      backdropFilter: 'var(--tw-backdrop-filter)'
    });
},
    plugin: 'backdropBlur'
  },
  // https://tailwindcss.com/docs/backdrop-brightness
  'backdrop-brightness': {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-backdrop-brightness': ("brightness(" + value + ")"),
      backdropFilter: 'var(--tw-backdrop-filter)'
    });
},
    plugin: 'backdropBrightness'
  },
  // https://tailwindcss.com/docs/backdrop-contrast
  'backdrop-contrast': {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-backdrop-contrast': ("contrast(" + value + ")"),
      backdropFilter: 'var(--tw-backdrop-filter)'
    });
},
    plugin: 'backdropContrast'
  },
  // https://tailwindcss.com/docs/backdrop-grayscale
  'backdrop-grayscale': {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-backdrop-grayscale': ("grayscale(" + value + ")"),
      backdropFilter: 'var(--tw-backdrop-filter)'
    });
},
    plugin: 'backdropGrayscale'
  },
  // https://tailwindcss.com/docs/backdrop-hue-rotate
  'backdrop-hue-rotate': {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-backdrop-hue-rotate': ("hue-rotate(" + value + ")"),
      backdropFilter: 'var(--tw-backdrop-filter)'
    });
},
    plugin: 'backdropHueRotate'
  },
  // https://tailwindcss.com/docs/backdrop-invert
  'backdrop-invert': {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-backdrop-invert': ("invert(" + value + ")"),
      backdropFilter: 'var(--tw-backdrop-filter)'
    });
},
    plugin: 'backdropInvert'
  },
  // https://tailwindcss.com/docs/backdrop-opacity
  'backdrop-opacity': {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-backdrop-opacity': ("opacity(" + value + ")"),
      backdropFilter: 'var(--tw-backdrop-filter)'
    });
},
    plugin: 'backdropOpacity'
  },
  // https://tailwindcss.com/docs/backdrop-saturate
  'backdrop-saturate': {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-backdrop-saturate': ("saturate(" + value + ")"),
      backdropFilter: 'var(--tw-backdrop-filter)'
    });
},
    plugin: 'backdropSaturate'
  },
  // https://tailwindcss.com/docs/backdrop-sepia
  'backdrop-sepia': {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-backdrop-sepia': ("sepia(" + value + ")"),
      backdropFilter: 'var(--tw-backdrop-filter)'
    });
},
    plugin: 'backdropSepia'
  },

  /**
   * ===========================================
   * Transitions
   */
  // https://tailwindcss.com/docs/transtiion-property
  // Note: Tailwind doesn't allow an arbitrary value but it's likely just an accident so it's been added here
  transition: {
    plugin: 'transition',
    value: ['lookup'],
    coerced: {
      lookup: function (value, theme) { return ({
        transitionProperty: value,
        transitionTimingFunction: theme('transitionTimingFunction.DEFAULT'),
        transitionDuration: theme('transitionDuration.DEFAULT')
      }); }
    }
  },
  // https://tailwindcss.com/docs/transition-duration
  duration: {
    prop: 'transitionDuration',
    config: 'transitionDuration'
  },
  // https://tailwindcss.com/docs/transition-timing-function
  ease: {
    prop: 'transitionTimingFunction',
    config: 'transitionTimingFunction'
  },
  // https://tailwindcss.com/docs/transition-delay
  delay: {
    prop: 'transitionDelay',
    config: 'transitionDelay'
  },

  /**
   * ===========================================
   * Transforms
   */
  // https://tailwindcss.com/docs/scale
  'scale-x': {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-scale-x': value,
      transform: 'var(--tw-transform)'
    });
},
    config: 'scale'
  },
  'scale-y': {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-scale-y': value,
      transform: 'var(--tw-transform)'
    });
},
    config: 'scale'
  },
  scale: {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-scale-x': value,
      '--tw-scale-y': value,
      transform: 'var(--tw-transform)'
    });
},
    config: 'scale'
  },
  // https://tailwindcss.com/docs/rotate
  rotate: {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-rotate': value,
      transform: 'var(--tw-transform)'
    });
},
    config: 'rotate'
  },
  // https://tailwindcss.com/docs/translate
  'translate-x': {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-translate-x': value,
      transform: 'var(--tw-transform)'
    });
},
    config: 'translate'
  },
  'translate-y': {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-translate-y': value,
      transform: 'var(--tw-transform)'
    });
},
    config: 'translate'
  },
  // https://tailwindcss.com/docs/skew
  'skew-x': {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-skew-x': value,
      transform: 'var(--tw-transform)'
    });
},
    config: 'skew'
  },
  'skew-y': {
    value: function (ref) {
      var value = ref.value;

      return ({
      '--tw-skew-y': value,
      transform: 'var(--tw-transform)'
    });
},
    config: 'skew'
  },
  // https://tailwindcss.com/docs/transform-origin
  origin: {
    prop: 'transformOrigin',
    config: 'transformOrigin'
  },

  /**
   * ===========================================
   * Interactivity
   */
  // https://tailwindcss.com/docs/appearance
  // See staticStyles.js
  // https://tailwindcss.com/docs/cursor
  cursor: {
    prop: 'cursor',
    config: 'cursor'
  },
  // https://tailwindcss.com/docs/outline
  outline: {
    plugin: 'outline',
    value: function (ref) {
      var value = ref.value;

      return ({
      outline: value,
      outlineOffset: '0'
    });
}
  },
  // https://tailwindcss.com/docs/pointer-events
  // https://tailwindcss.com/docs/resize
  // https://tailwindcss.com/docs/user-select
  // See staticStyles.js

  /**
   * ===========================================
   * Svg
   */
  // https://tailwindcss.com/docs/fill
  fill: {
    prop: 'fill',
    plugin: 'fill'
  },
  // https://tailwindcss.com/docs/stroke
  stroke: {
    prop: 'stroke',
    value: ['length', 'color'],
    plugin: 'stroke',
    coerced: {
      color: function (value) { return ({
        stroke: value
      }); },
      length: {
        property: 'strokeWidth'
      }
    }
  }
  /**
   * ===========================================
   * Accessibility
   */
  // https://tailwindcss.com/docs/screen-readers
  // See staticStyles.js

};

// https://tailwindcss.com/docs/font-variant-numeric
// This feature uses var+comment hacks to get around property stripping:
// https://github.com/tailwindlabs/tailwindcss.com/issues/522#issuecomment-687667238
var fontVariants = {
  '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)',
  '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)',
  '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)',
  '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)',
  '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)',
  fontVariantNumeric: 'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)'
};
var staticStyles = {
  /**
   * ===========================================
   * Layout
   */
  // https://tailwindcss.com/docs/container
  // See dynamicStyles.js
  // https://tailwindcss.com/docs/box-decoration-break
  'decoration-slice': {
    output: {
      boxDecorationBreak: 'slice'
    }
  },
  'decoration-clone': {
    output: {
      boxDecorationBreak: 'clone'
    }
  },
  // https://tailwindcss.com/docs/box-sizing
  'box-border': {
    output: {
      boxSizing: 'border-box'
    }
  },
  'box-content': {
    output: {
      boxSizing: 'content-box'
    }
  },
  // https://tailwindcss.com/docs/display
  hidden: {
    output: {
      display: 'none'
    }
  },
  block: {
    output: {
      display: 'block'
    }
  },
  contents: {
    output: {
      display: 'contents'
    }
  },
  'list-item': {
    output: {
      display: 'list-item'
    }
  },
  'inline-block': {
    output: {
      display: 'inline-block'
    }
  },
  inline: {
    output: {
      display: 'inline'
    }
  },
  'flow-root': {
    output: {
      display: 'flow-root'
    }
  },
  flex: {
    output: {
      display: 'flex'
    }
  },
  'inline-flex': {
    output: {
      display: 'inline-flex'
    }
  },
  grid: {
    output: {
      display: 'grid'
    }
  },
  'inline-grid': {
    output: {
      display: 'inline-grid'
    }
  },
  table: {
    output: {
      display: 'table'
    }
  },
  'inline-table': {
    output: {
      display: 'inline-table'
    }
  },
  'table-caption': {
    output: {
      display: 'table-caption'
    }
  },
  'table-cell': {
    output: {
      display: 'table-cell'
    }
  },
  'table-column': {
    output: {
      display: 'table-column'
    }
  },
  'table-column-group': {
    output: {
      display: 'table-column-group'
    }
  },
  'table-footer-group': {
    output: {
      display: 'table-footer-group'
    }
  },
  'table-header-group': {
    output: {
      display: 'table-header-group'
    }
  },
  'table-row-group': {
    output: {
      display: 'table-row-group'
    }
  },
  'table-row': {
    output: {
      display: 'table-row'
    }
  },
  // https://tailwindcss.com/docs/float
  'float-right': {
    output: {
      float: 'right'
    }
  },
  'float-left': {
    output: {
      float: 'left'
    }
  },
  'float-none': {
    output: {
      float: 'none'
    }
  },
  // https://tailwindcss.com/docs/clear
  'clear-left': {
    output: {
      clear: 'left'
    }
  },
  'clear-right': {
    output: {
      clear: 'right'
    }
  },
  'clear-both': {
    output: {
      clear: 'both'
    }
  },
  'clear-none': {
    output: {
      clear: 'none'
    }
  },
  // https://tailwindcss.com/docs/isolation
  isolate: {
    output: {
      isolation: 'isolate'
    }
  },
  'isolation-auto': {
    output: {
      isolation: 'auto'
    }
  },
  // https://tailwindcss.com/docs/object-fit
  'object-contain': {
    output: {
      objectFit: 'contain'
    }
  },
  'object-cover': {
    output: {
      objectFit: 'cover'
    }
  },
  'object-fill': {
    output: {
      objectFit: 'fill'
    }
  },
  'object-none': {
    output: {
      objectFit: 'none'
    }
  },
  'object-scale-down': {
    output: {
      objectFit: 'scale-down'
    }
  },
  // https://tailwindcss.com/docs/object-position
  // See dynamicStyles.js
  // https://tailwindcss.com/docs/overflow
  'overflow-auto': {
    output: {
      overflow: 'auto'
    },
    config: 'overflow'
  },
  'overflow-hidden': {
    output: {
      overflow: 'hidden'
    },
    config: 'overflow'
  },
  'overflow-visible': {
    output: {
      overflow: 'visible'
    },
    config: 'overflow'
  },
  'overflow-scroll': {
    output: {
      overflow: 'scroll'
    },
    config: 'overflow'
  },
  'overflow-x-auto': {
    output: {
      overflowX: 'auto'
    },
    config: 'overflow'
  },
  'overflow-y-auto': {
    output: {
      overflowY: 'auto'
    },
    config: 'overflow'
  },
  'overflow-x-hidden': {
    output: {
      overflowX: 'hidden'
    },
    config: 'overflow'
  },
  'overflow-y-hidden': {
    output: {
      overflowY: 'hidden'
    },
    config: 'overflow'
  },
  'overflow-x-visible': {
    output: {
      overflowX: 'visible'
    },
    config: 'overflow'
  },
  'overflow-y-visible': {
    output: {
      overflowY: 'visible'
    },
    config: 'overflow'
  },
  'overflow-x-scroll': {
    output: {
      overflowX: 'scroll'
    },
    config: 'overflow'
  },
  'overflow-y-scroll': {
    output: {
      overflowY: 'scroll'
    },
    config: 'overflow'
  },
  // https://tailwindcss.com/docs/position
  static: {
    output: {
      position: 'static'
    }
  },
  fixed: {
    output: {
      position: 'fixed'
    }
  },
  absolute: {
    output: {
      position: 'absolute'
    }
  },
  relative: {
    output: {
      position: 'relative'
    }
  },
  sticky: {
    output: {
      position: 'sticky'
    }
  },
  // https://tailwindcss.com/docs/top-right-bottom-left
  // See dynamicStyles.js
  // https://tailwindcss.com/docs/visibility
  visible: {
    output: {
      visibility: 'visible'
    }
  },
  invisible: {
    output: {
      visibility: 'hidden'
    }
  },
  // https://tailwindcss.com/docs/z-index
  // See dynamicStyles.js
  // https://tailwindcss.com/docs/space
  // See dynamicStyles.js for the rest
  'space-x-reverse': {
    output: {
      '> :not([hidden]) ~ :not([hidden])': {
        '--tw-space-x-reverse': '1'
      }
    }
  },
  'space-y-reverse': {
    output: {
      '> :not([hidden]) ~ :not([hidden])': {
        '--tw-space-y-reverse': '1'
      }
    }
  },
  // https://tailwindcss.com/docs/divide-width
  // See dynamicStyles.js for the rest
  'divide-x-reverse': {
    output: {
      '> :not([hidden]) ~ :not([hidden])': {
        '--tw-divide-x-reverse': '1'
      }
    }
  },
  'divide-y-reverse': {
    output: {
      '> :not([hidden]) ~ :not([hidden])': {
        '--tw-divide-y-reverse': '1'
      }
    }
  },
  // https://tailwindcss.com/docs/divide-style
  'divide-solid': {
    output: {
      '> :not([hidden]) ~ :not([hidden])': {
        borderStyle: 'solid'
      }
    }
  },
  'divide-dashed': {
    output: {
      '> :not([hidden]) ~ :not([hidden])': {
        borderStyle: 'dashed'
      }
    }
  },
  'divide-dotted': {
    output: {
      '> :not([hidden]) ~ :not([hidden])': {
        borderStyle: 'dotted'
      }
    }
  },
  'divide-double': {
    output: {
      '> :not([hidden]) ~ :not([hidden])': {
        borderStyle: 'double'
      }
    }
  },
  'divide-none': {
    output: {
      '> :not([hidden]) ~ :not([hidden])': {
        borderStyle: 'none'
      }
    }
  },

  /**
   * ===========================================
   * Flexbox
   */
  // https://tailwindcss.com/docs/flexbox-direction
  'flex-row': {
    output: {
      flexDirection: 'row'
    }
  },
  'flex-row-reverse': {
    output: {
      flexDirection: 'row-reverse'
    }
  },
  'flex-col': {
    output: {
      flexDirection: 'column'
    }
  },
  'flex-col-reverse': {
    output: {
      flexDirection: 'column-reverse'
    }
  },
  // https://tailwindcss.com/docs/flex-wrap
  'flex-nowrap': {
    output: {
      flexWrap: 'nowrap'
    }
  },
  'flex-wrap': {
    output: {
      flexWrap: 'wrap'
    }
  },
  'flex-wrap-reverse': {
    output: {
      flexWrap: 'wrap-reverse'
    }
  },
  // https://tailwindcss.com/docs/align-items
  'items-stretch': {
    output: {
      alignItems: 'stretch'
    }
  },
  'items-start': {
    output: {
      alignItems: 'flex-start'
    }
  },
  'items-center': {
    output: {
      alignItems: 'center'
    }
  },
  'items-end': {
    output: {
      alignItems: 'flex-end'
    }
  },
  'items-baseline': {
    output: {
      alignItems: 'baseline'
    }
  },
  // https://tailwindcss.com/docs/align-content
  'content-start': {
    output: {
      alignContent: 'flex-start'
    }
  },
  'content-center': {
    output: {
      alignContent: 'center'
    }
  },
  'content-end': {
    output: {
      alignContent: 'flex-end'
    }
  },
  'content-between': {
    output: {
      alignContent: 'space-between'
    }
  },
  'content-around': {
    output: {
      alignContent: 'space-around'
    }
  },
  // https://tailwindcss.com/docs/align-self
  'self-auto': {
    output: {
      alignSelf: 'auto'
    }
  },
  'self-baseline': {
    output: {
      alignSelf: 'baseline'
    }
  },
  'self-start': {
    output: {
      alignSelf: 'flex-start'
    }
  },
  'self-center': {
    output: {
      alignSelf: 'center'
    }
  },
  'self-end': {
    output: {
      alignSelf: 'flex-end'
    }
  },
  'self-stretch': {
    output: {
      alignSelf: 'stretch'
    }
  },
  // https://tailwindcss.com/docs/justify-content
  'justify-start': {
    output: {
      justifyContent: 'flex-start'
    }
  },
  'justify-center': {
    output: {
      justifyContent: 'center'
    }
  },
  'justify-end': {
    output: {
      justifyContent: 'flex-end'
    }
  },
  'justify-between': {
    output: {
      justifyContent: 'space-between'
    }
  },
  'justify-around': {
    output: {
      justifyContent: 'space-around'
    }
  },
  'justify-evenly': {
    output: {
      justifyContent: 'space-evenly'
    }
  },
  // https://tailwindcss.com/docs/flex
  // https://tailwindcss.com/docs/flex-grow
  // https://tailwindcss.com/docs/flex-shrink
  // https://tailwindcss.com/docs/order
  // See dynamicStyles.js

  /**
   * ===========================================
   * Grid
   */
  // https://tailwindcss.com/docs/grid-template-columns
  // https://tailwindcss.com/docs/grid-column
  // https://tailwindcss.com/docs/grid-template-rows
  // https://tailwindcss.com/docs/grid-row
  // https://tailwindcss.com/docs/gap
  // See dynamicStyles.js
  // https://tailwindcss.com/docs/grid-auto-flow
  'grid-flow-row': {
    output: {
      gridAutoFlow: 'row'
    }
  },
  'grid-flow-col': {
    output: {
      gridAutoFlow: 'column'
    }
  },
  'grid-flow-row-dense': {
    output: {
      gridAutoFlow: 'row dense'
    }
  },
  'grid-flow-col-dense': {
    output: {
      gridAutoFlow: 'column dense'
    }
  },
  // https://tailwindcss.com/docs/grid-auto-columns
  // https://tailwindcss.com/docs/grid-auto-rows#app
  // See dynamicStyles.js

  /**
   * ===========================================
   * Spacing
   */
  // https://tailwindcss.com/docs/padding
  // https://tailwindcss.com/docs/margin
  // See dynamicStyles.js

  /**
   * ===========================================
   * Sizing
   */
  // https://tailwindcss.com/docs/width
  // https://tailwindcss.com/docs/min-width
  // https://tailwindcss.com/docs/max-width
  // https://tailwindcss.com/docs/height
  // https://tailwindcss.com/docs/min-height
  // https://tailwindcss.com/docs/max-height
  // See dynamicStyles.js

  /**
   * ===========================================
   * Typography
   */
  // https://tailwindcss.com/docs/font-family
  // https://tailwindcss.com/docs/font-size
  // See dynamicStyles.js
  // https://tailwindcss.com/docs/font-smoothing
  antialiased: {
    output: {
      WebkitFontSmoothing: 'antialiased',
      MozOsxFontSmoothing: 'grayscale'
    }
  },
  'subpixel-antialiased': {
    output: {
      WebkitFontSmoothing: 'auto',
      MozOsxFontSmoothing: 'auto'
    }
  },
  // https://tailwindcss.com/docs/font-style
  italic: {
    output: {
      fontStyle: 'italic'
    }
  },
  'not-italic': {
    output: {
      fontStyle: 'normal'
    }
  },
  // https://tailwindcss.com/docs/font-weight
  // See dynamicStyles.js
  // https://tailwindcss.com/docs/font-variant-numeric
  ordinal: {
    output: Object.assign({}, fontVariants,
      {'--tw-ordinal': 'ordinal'})
  },
  'slashed-zero': {
    output: Object.assign({}, fontVariants,
      {'--tw-slashed-zero': 'slashed-zero'})
  },
  'lining-nums': {
    output: Object.assign({}, fontVariants,
      {'--tw-numeric-figure': 'lining-nums'})
  },
  'oldstyle-nums': {
    output: Object.assign({}, fontVariants,
      {'--tw-numeric-figure': 'oldstyle-nums'})
  },
  'proportional-nums': {
    output: Object.assign({}, fontVariants,
      {'--tw-numeric-spacing': 'proportional-nums'})
  },
  'tabular-nums': {
    output: Object.assign({}, fontVariants,
      {'--tw-numeric-spacing': 'tabular-nums'})
  },
  'diagonal-fractions': {
    output: Object.assign({}, fontVariants,
      {'--tw-numeric-fraction': 'diagonal-fractions'})
  },
  'stacked-fractions': {
    output: Object.assign({}, fontVariants,
      {'--tw-numeric-fraction': 'stacked-fractions'})
  },
  'normal-nums': {
    output: {
      fontVariantNumeric: 'normal'
    }
  },
  // https://tailwindcss.com/docs/letter-spacing
  // https://tailwindcss.com/docs/line-height
  // https://tailwindcss.com/docs/list-style-type
  // See dynamicStyles.js
  // https://tailwindcss.com/docs/list-style-position
  'list-inside': {
    output: {
      listStylePosition: 'inside'
    }
  },
  'list-outside': {
    output: {
      listStylePosition: 'outside'
    }
  },
  // https://tailwindcss.com/docs/placeholder-color
  // https://tailwindcss.com/docs/placeholder-opacity
  // See dynamicStyles.js
  // https://tailwindcss.com/docs/text-align
  'text-left': {
    output: {
      textAlign: 'left'
    }
  },
  'text-center': {
    output: {
      textAlign: 'center'
    }
  },
  'text-right': {
    output: {
      textAlign: 'right'
    }
  },
  'text-justify': {
    output: {
      textAlign: 'justify'
    }
  },
  // https://tailwindcss.com/docs/text-color
  // https://tailwindcss.com/docs/text-opacity
  // See dynamicStyles.js
  // https://tailwindcss.com/docs/text-decoration
  underline: {
    output: {
      textDecoration: 'underline'
    }
  },
  'line-through': {
    output: {
      textDecoration: 'line-through'
    }
  },
  'no-underline': {
    output: {
      textDecoration: 'none'
    }
  },
  // https://tailwindcss.com/docs/text-transform
  uppercase: {
    output: {
      textTransform: 'uppercase'
    }
  },
  lowercase: {
    output: {
      textTransform: 'lowercase'
    }
  },
  capitalize: {
    output: {
      textTransform: 'capitalize'
    }
  },
  'normal-case': {
    output: {
      textTransform: 'none'
    }
  },
  // https://tailwindcss.com/docs/vertical-align
  'align-baseline': {
    output: {
      verticalAlign: 'baseline'
    }
  },
  'align-top': {
    output: {
      verticalAlign: 'top'
    }
  },
  'align-middle': {
    output: {
      verticalAlign: 'middle'
    }
  },
  'align-bottom': {
    output: {
      verticalAlign: 'bottom'
    }
  },
  'align-text-top': {
    output: {
      verticalAlign: 'text-top'
    }
  },
  'align-text-bottom': {
    output: {
      verticalAlign: 'text-bottom'
    }
  },
  // https://tailwindcss.com/docs/whitespace
  'whitespace-normal': {
    output: {
      whiteSpace: 'normal'
    }
  },
  'whitespace-nowrap': {
    output: {
      whiteSpace: 'nowrap'
    }
  },
  'whitespace-pre': {
    output: {
      whiteSpace: 'pre'
    }
  },
  'whitespace-pre-line': {
    output: {
      whiteSpace: 'pre-line'
    }
  },
  'whitespace-pre-wrap': {
    output: {
      whiteSpace: 'pre-wrap'
    }
  },
  // https://tailwindcss.com/docs/word-break
  'break-normal': {
    output: {
      wordBreak: 'normal',
      overflowWrap: 'normal'
    },
    config: 'wordbreak'
  },
  'break-words': {
    output: {
      overflowWrap: 'break-word'
    },
    config: 'wordbreak'
  },
  'break-all': {
    output: {
      wordBreak: 'break-all'
    },
    config: 'wo