Generating Custom Utilities

[Andrew Styles]

Hi Andy,

Thanks for open sourcing this, it's really great.

I'm having issue with generating Utility Classes in tailwind.config.js - it's this function:

plugin(function ({addUtilities, config}) {
  const currentConfig = config();
  const customUtilities = [
    {key: 'spacing', prefix: 'flow-space', property: '--flow-space'},
    {key: 'spacing', prefix: 'region-space', property: '--region-space'},
    {key: 'spacing', prefix: 'gutter', property: '--gutter'}
  ];

  customUtilities.forEach(({key, prefix, property}) => {
    const group = currentConfig.theme[key];

    if (!group) {
      return;
    }

    Object.keys(group).forEach(key => {
      addUtilities({
        [`.${prefix}-${key}`]: postcssJs.objectify(
          postcss.parse(`${property}: ${group[key]}`)
        )
      });
    });
  });
})

As I understand it this should add utility classes to the CSS, e.g.:

.flow-space-m-l {
    --flow-space: clamp(1.5rem,1.24rem + 1.30vw,2.25rem)
}

But these utility classes aren't created - is there something I need to add to make this happen?

What I'm after generating useful classes along the lines of '.bg-primary: var(--color-primary)'.

Apologies if this is an obvious question...

[Andrew Styles]

Ignore me, I've worked it out!

You add the class to the html (or whatever you use) and make sure tailwind can 'see' it in the content var

module.exports = {
  content: ['./**/*.{html,js,jsx,mdx,njk,twig,vue,php}'],