How to reference utility classes added by plugins inside of theme() directive

[schardev]

Suppose I have a plugin that adds utility classes for font sizes:

module.exports = plugin.withOptions((opts) => {
  return ({ addUtilities }) => {
      const sizes = {
        "fluid-0": { fontSize: '<somevalue>' },
        "fluid-1": { fontSize: '<somevalue>' }
      }

     addUtilities(sizes)
  }
})

Now, I can reference them inside my css like:

@layer components {
  .btn {
    @apply fluid-0;
  }
}

But how can I access them using the theme() directive?

module.exports = {
  // ... other config
  extend: {
    typography: (theme) => ({
    DEFAULT: {
      css: {
        fontSize: theme(/* <how should I access them utilties here? */>)
      }
    }
    })
  }
}

Should I have to change something inside my plugin? Is there a way to add those utilities inside the default fontSize group in tailwind?

[wongjn]

You could look at creating "dynamic" utility classes, where the values are pulled from the theme configuration rather than hard-coded inside your plugin. This would mean you would be able to access them via the theme() function:

module.exports = plugin(({ matchUtilities, theme }) => {
  matchUtilities(
    { fluid: value => ({ fontSize: value }) },
    { values: theme('fluidFontSizes') },
  );
});

module.exports = {
  theme: {
    // Could also go in extend or be in the plugin's 
    // default values.
    fluidFontSizes: {
      1: '<somevalue>',
      2: '<somevalue>',
    },
    extend: {
      typography: ({ theme }) => ({
        DEFAULT: {
          css: {
            fontSize: theme('fluidFontSizes.1'),
          },
        },
      }),
    },
  },
  // …
};

[schardev]

But wouldn't that require the user to have static values inside their config? I don't expect users to have those values, so I'd rather want to "append" those utility classes to the default tailwind fontSize plugin. Is their a way to do that?

I could add a default object to provide default values to the plugin but then I'd loose the ability to calculate dynamic values based on the options provided by user (as I have to calculate them inside the default module.export itself).

[wongjn]

But wouldn't that require the user to have static values inside their config?

No, you could declare them as a plugin's default values.

I'd rather want to "append" those utility classes to the default tailwind fontSize plugin. Is their a way to do that?

Yep! Add them to theme.extend.fontSize like:

module.exports = {
  theme: {
    fontSize: {
      'fluid-1': '<somevalue>',
      'fluid-2': '<somevalue>',
    },
  },
  // …
};

[schardev]

@wongjn I think I misinterpreted your answer. I got it working like I wanted it to be with:

export = plugin.withOptions(
  () => {
    return ({ matchUtilities, theme }) => {
      matchUtilities(
        { text: (value: string) => ({ fontSize: value }) },
        { values: theme("fluidFontSize") }
      );
    };
  },
  (opts) => {
    const fontSizes = generateFontScales(opts);
    return {
      theme: { fluidFontSize: fontSizes },
    };
  }
);

I think the docs doesn't make the behaviour pretty clear but I got it right after tinkering with it.