defineConfig does not seem to support theme functions

[marbemac]

From the next branch docs - is the below expected to work already? When added to a defineConfig() (from @twind/tailwind), ends up throwing a bunch of errors.

[sastan]

Thank you for reporting this issue. Typing the theme property is really challenging. After some investigation I got it working like this:

      theme: {
        simple: {
          a: '1',
        },
        // must use type for section resolvers
        // referencing other theme section
        custom: ({
          theme,
        }: ThemeSectionResolverContext<TailwindTheme>): TailwindTheme['colors'] => ({
          gray: theme('colors.gray'),
        }),
        // overwrite existing section
        fill: ({ theme }: ThemeSectionResolverContext<TailwindTheme>): TailwindTheme['colors'] => ({
          gray: theme('colors.gray'),
        }),
        extend: {
          // types are infered in extend
          // extending existing section
          divideColor: ({ theme }) => ({
            gray: theme('colors.gray'),
          }),
        },
      },

I will publish a version with this fix soon.

If you have any idea how we can omit the types outside extend please let me know.

[marbemac]

No worries - good ol' ts-expect-error to the rescue for now, thanks for the quick response.

Typing the theme property is really challenging

Oh I believe it! Semi related to #201 (comment), if I can find the time I'm hoping to dig into how Stitches has put together their typings - they're achieved some voodoo magic over there, surprised re how well they managed to integrate custom themes with typings/autocomplete out of the box.

[sastan]

It is little different here in twind. We have to combine themes from the presets with the user provided one.

If you find a good solution PRs are very welcome.

[marbemac]

On next.26, seeing the following issues:

Theme prop not available on the theme function

It's typed as https://github.com/tw-in-js/twind/blob/next/packages/twind/src/types.ts#L372-L377, so it seems to make sense that theme would be available on this function arg (but the code below does actually work at runtime - just a typings issue).

This one has me scratching my head

If I copy this same config into the twind repo packages/tailwind/src and import defineConfig from index.ts, I don't get the error (just get the error above). The error pops up as soon as I try to use a theme function. Might just be something w my setup, I'll try to dig in further.