Cannot use theme helper in custom configuration plugin

[kevinwolfcr]

Hello! I have the following tailwind.config.js:

import { mauveDark, mauveDarkA } from "@radix-ui/colors"
import plugin from "tailwindcss/plugin"

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "class",
  content: ["./src/**/*.tsx"],
  theme: {
    colors: {
      ...fromRadix(mauveDark, "base"),
      ...fromRadix(mauveDarkA, "base-a"),
    },
    spacing: {
      0: 0,
      1: rem(4),
      2: rem(8),
      3: rem(12),
      4: rem(16),
      5: rem(24),
      6: rem(32),
      7: rem(40),
      8: rem(64),
      9: rem(80),
      10: rem(160),
    },
    fontSize: {
      1: rem(12),
      2: rem(14),
      3: rem(16),
      4: rem(18),
      5: rem(20),
      6: rem(24),
      7: rem(28),
      8: rem(35),
      9: rem(60),
    },
    letterSpacing: {
      1: "0.0025em",
      2: "0em",
      3: "0em",
      4: "-0.0025em",
      5: "-0.005em",
      6: "-0.00625em",
      7: "-0.0075em",
      8: "-0.01em",
      9: "-0.025em",
    },
    lineHeight: {
      1: rem(16),
      2: rem(20),
      3: rem(24),
      4: rem(26),
      5: rem(28),
      6: rem(30),
      7: rem(36),
      8: rem(40),
      9: rem(68),
    },
    backgroundImage: (theme) => ({
      gradient: `radial-gradient(50% 50.00% at 50% 50.00%, ${theme("colors.base-3")} 50.52%, ${theme(
        "colors.base-1",
      )} 98.44%)`,
    }),
  },
  plugins: [
    plugin(function typographyPlugin({ addComponents, theme }) {
      addComponents(
        Object.keys(theme("fontSize")).reduce(
          (styles, key) => ({
            ...styles,
            [`.typography-${key}`]: {
              fontSize: theme(`fontSize.${key}`),
              letterSpacing: theme(`letterSpacing.${key}`),
              lineHeight: theme(`lineHeight.${key}`),
            },
          }),
          {},
        ),
      )
    }),
  ],
}

function fromRadix(scale, name) {
  return Object.values(scale).reduce(
    (scale, step, i) => ({
      ...scale,
      [[name, i + 1].join("-")]: step,
    }),
    {},
  )
}

function rem(from) {
  return `${from / 16}rem`
}

However, when trying to call the create(tailwindConfig) function, I get this error:

Error: tailwindcss plugin function argument object prop "fontSize" not implemented

[jaredh159]

I’m mostly away from my computer for a few days, so thumbing this out on my phone…

but, this library only supports custom utilities in the way shown in the readme. RadixUi is probably doing a lot more under the hood calling out to the plug-in function.

I’m not familiar with that library, but from a quick glance it looks like it’s heavily (maybe only?) geared towards web. This library only aims to support react native for native not react native web. So if you’re targeting RN web and trying to use radix ui, this is probably not the library for you, I doubt it will work for you.

[kevinwolfcr]

Nope, the library is only to generate some colors, without even using the plugins API.

[jaredh159]

oh, ok, back at my computer, and looked closer at your code. yeah, the problem is that you're trying to use more of the tailwind api than the plugin supports. basically, we only support the addUtilities method of the object that gets passed to the plugin function, and only in the way shown in the readme. you're currently destructuring both theme and addComponents, both of which are not supported, sorry.

[jaredh159]

to add a bit more context, I basically implemented just barely enough of the plugin api to allow for custom utilities as shown in the readme. then i threw errors for every other part of the api that tailwind exposes, which is what you're running into here.

that said, if other parts of the plugin api are useful and would integrate well, i'd be open to a PR to add support for them. it wasn't a decision of mine to never do more, just that i got the MVP feature working and moved on, if that makes sense.

[jaredh159]

closing, feel free to re-open if you have more thoughts, or want to discuss a PR. thanks!