Possible Bug in Font Sizes

[clintfisher]

Hi there, I'm currently running

 "tailwind-config-viewer": "^1.5.1",
 "tailwindcss": "^2.1.2",

Things look fine except in the Font Sizes section, where most of the font sizes are not being rendered:

Looking at the console I'm seeing an error that is firing 15 times - the same number of font sizes that aren't being shown:

And here is the snippet of fontSize in my tailwind.config.js

module.exports = {
  theme: {
    extend: {
      fontSize: {
        'xxs': ['0.625rem', '1.125rem'],
        'xxs-1': ['0.6875rem', '0.8125rem'],
        'xs-1': '0.8125rem',
        'sm-1': '0.9375rem',
        '1xl': '1.375rem',
        '2xl-1': '1.625rem'
      }
    }
}

===
Update: I thought It may have something to do with how I was specifying the lineHeight values. Looked back at Tailwinds default config file and updated them to match, but it didn't fix the config viewer errors.

module.exports = {
  theme: {
    extend: {
      fontSize: {
        xxs: ['0.625rem', { lineHeight: '1.125rem' }],
        'xxs-1': ['0.6875rem', { lineHeight: '0.8125rem' }],
        'xs-1': '0.8125rem',
        'sm-1': '0.9375rem',
        '1xl': '1.375rem',
        '2xl-1': '1.625rem'
      }
    }
}

===

Thanks, really dig the config viewer.

[rogden]

@clintfisher Thanks for the report! I tried to replicate using the versions of Tailwind and the config viewer but wasn't able to:

Can you post the contents your entire tailwind.config file?

[clintfisher]

Hey thanks for looking into this, here's my full config.

Maybe has something to do with how I'm referring to CSS placeholders in my font fallback stack vars. I should add them to the themeReplacements like I did the color vars and see if that helps.

UPDATE: Added the placeholders used for fonts to the themeReplacements and still got the same problem unfortunately.

const plugin = require('tailwindcss/plugin');
const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default;
const colorKeyValues = require('./tailwind.colors');

// fonts
const sans = ['arial', '"helvetica neue"', 'helvetica', 'sans-serif'];
const serif = ['"times new roman"', 'times', 'serif'];
const headline = ['var(--headline-font)', ...serif];
const service = ['var(--service-font)', ...sans];
const servicealt = ['var(--service-font-alt)', ...sans];
const serviceblack = ['var(--service-font-black)', ...sans];
const body = ['var(--body-font)', ...serif];

// colors
const colorTheme = Object.keys(colorKeyValues).reduce((o, color) => {
  const colorVar = `var(--${color})`;
  o.colors[color] = colorVar;
  o.themeReplacements[colorVar] = colorKeyValues[color];
  return o;
}, {
  colors: {},
  themeReplacements: {}
});

// helpers

/**
 * creates a variant plugin
 * @param {string} variant - the name of your variant
 * @param {string} selector - the css selector you want to create
 * @returns - a variant plugin which you can apply to a utility
 */

const makeVariant = (variant, selector) => {
  return plugin(({ addVariant, e }) => {
    addVariant(`${variant}`, ({ modifySelectors, separator }) => {
      modifySelectors(({ className }) => {
        return `.${e(`${variant}${separator}${className}`)}${selector}`;
      });
    });
  });
};

// plugins

const isOpen = makeVariant('isOpen', '[open]');
const firstOfType = makeVariant('first-of-type', ':first-of-type');
const lastOfType = makeVariant('last-of-type', ':last-of-type');

const borderColor = ({ addUtilities, e, theme, variants }) => {
  const colors = flattenColorPalette(theme('borderColor'));
  delete colors['default'];

  const colorMap = Object.keys(colors)
    .map(color => ({
      [`.border-t-${color}`]: { borderTopColor: colors[color] },
      [`.border-r-${color}`]: { borderRightColor: colors[color] },
      [`.border-b-${color}`]: { borderBottomColor: colors[color] },
      [`.border-l-${color}`]: { borderLeftColor: colors[color] }
    }));

  const utilities = Object.assign({}, ...colorMap);

  addUtilities(utilities, variants('borderColor'));
};

const keepAll = ({e, addUtilities}) => {
  addUtilities({
    '.keep-all': {
      'word-break': 'keep-all'
    }
  });
};

module.exports = {
  purge: {
    enabled: process.env.NODE_ENV !== 'development',
    content: [
      '../../styleguide/**/*.hbs',
      '../../styleguide/**/*.js',
      '../../styleguide/**/*.html'
    ]
  },
  darkMode: false,
  theme: {
    extend: {
      maxWidth: {
        45: '11.25rem',
        70: '17.5rem',
        106: '26.5rem',
        142: '35.5rem',
        170: '42.5rem',
        246: '61.5rem',
        300: '75rem'
      },
      spacing: {
        0.75: '0.1875rem',
        1.25: '0.3125rem',
        1.75: '0.4375rem',
        2.25: '0.5625rem',
        2.75: '0.6875rem',
        3.75: '0.9375rem',
        4.25: '1.0625rem',
        5.5: '1.375rem',
        6.5: '1.625rem',
        7.5: '1.875rem',
        12.5: '3.125rem',
        15: '3.75rem',
        17.5: '4.375rem',
        24.5: '6.125rem',
        64.5: '16.25rem'
      },
      boxShadow: {
        'xs': '0 0 0 3px rgba(0, 0, 0, 1)',
        'sm-1': '0 1px 5px 0 rgba(0, 0, 0, 0.15)'
      },
      borderRadius: {
        'sm-1': '0.3125rem'
      },
      fontSize: {
        xxs: '0.625rem',
        'xxs-1': '0.6875rem',
        'xs-1': '0.8125rem',
        'sm-1': '0.9375rem',
        '1xl': '1.375rem',
        '2xl-1': '1.625rem'
      },
      letterSpacing: {
        'initial': 'initial',
        'tightest': '-0.0125rem',
        'tightest-1': '-0.00875rem',
        'smallest': '0.0125rem'
      },
      lineHeight: {
        2.5: '0.625rem',
        2.75: '0.6875rem',
        3.25: '0.8125rem',
        3.5: '.875rem',
        4.5: '1.125rem',
        4.75: '1.1875rem',
        5.25: '1.3125rem',
        5.5: '1.375rem',
        6.5: '1.625rem',
        7.25: '1.8125rem',
        7.5: '1.875rem',
        7.75: '1.9375rem',
        9.5: '2.375rem',
        11.5: '2.875rem',
        'inherit': 'inherit'
      },
      backgroundColor: theme => ({
        'transparent': 'transparent'
      }),
      backgroundPosition: {
        'left-top-2': '0 0.5rem'
      },
      backgroundSize: {
        'px': '1px 1px'
      },
      zIndex: {
        '1': '1',
        '2147483647': '2147483647'
      },
      transitionDuration: {
        '250': '250ms'
      },
      strokeWidth: {
        '6': '6'
      }
    },
    colors: colorTheme.colors,
    screens: {
      'xs': '320px',
      'xs-1': '360px',
      'xs-2': '500px',
      'sm': '568px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1240px',
      'xxl': '1440px'
    },
    fontFamily: {
      sans,
      serif,
      headline,
      service,
      servicealt,
      serviceblack,
      body
    },
    configViewer: {
      themeReplacements: colorTheme.themeReplacements
    }
  },
  variants: {
    extend: {
      display: ['first-of-type'],
      width: ['first', 'first-of-type', 'last'],
      margin: ['before', 'first', 'first-of-type', 'last', 'last-of-type'],
      padding: ['first', 'last', 'last-of-type'],
      borderWidth: ['responsive', 'first', 'last', 'last-of-type', 'hover', 'focus'],
      textColor: ['active'],
      visibility: ['isOpen']
    }
  },
  corePlugins: {
    preflight: false
  },
  plugins: [
    require('tailwindcss-pseudo-elements')({
      contentUtilities: {
        'prefix': 'data-tw-content'
      }
    }),
    isOpen,
    firstOfType,
    lastOfType,
    borderColor,
    keepAll
  ]
};

[rogden]

@clintfisher Closing this as it was fixed in https://github.com/rogden/tailwind-config-viewer/releases/tag/v.1.6.2