API consideration: return `tw` from `setup` function

So one issue I notice with the way the API works, is that you have to manually ensure tw is only called after setup. Integrating twind in my Next.js project and having followed the examples, even then, I’m still getting some “late setup call” errors, which I think is a sign that this constraint can’t be reliably followed

Suggestion: when needing a config override, the user should create their own tw file which includes the setup call. Setup returns the tw function, which is then imported throughout the app for styling. Logically, this ensures that setup can’t be called after tw. To clarify:

// tw.ts
import { setup } from "twind"

export const tw = setup({
	theme: { colors: { palevioletred: "palevioletred" } },
})

// Button.tsx
import { tw } from "./tw"

export const Button = () => (
	<button type="button" className={tw`p-3 rounded bg-blue-500 text-white`}>
		hi
	</button>
)

With the current API, it’s true that one could also reexport tw from the tw.ts file. My suggestion is to make this API change to possibly enforce using the returned tw function, and/or document that usage

[itsMapleLeaf]

Yeah, that’s fine. I can post my repo over there

[sastan]

Thanks for the report. Could you share a repo where this happens?

We should make it more clear that setup should be called in the main entry file. The idea is that the setup export modifies the tw export to allow libraries to use import { tw } from 'twind' while the application is may configure tw using setup.

What you are trying is already possible using the yet undocumented create export (see Web Components example):

// tw.ts
import { create } from "twind"

export const { tw } = create({
	theme: { colors: { palevioletred: "palevioletred" } },
})

I hope that helps…

PS: Sorry for the inconvenience we are still working on the documentation.