You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Somewhat like the introduction of function helpers like TW.{backgroundColor,opacity,…}, I'm wondering if it might make sense to apply a similar pattern to variants. This could address the limitation where one can only use tailwindcss-classnames with one modifier like T.backgroundColor('active:bg-red-500'), where something with more modifiers like T.backgroundColor('active:hover:bg-red-500)` would not typecheck.
Moreover, it might help reduce the amount of types overall. I'm not sure if this would improve TS performance but it seems like it might?
Example of API:
import { TW, M } from "tailwindcss-classnames";
const classname = classnames(
TW.backgroundColor(M("active", "hover", "active:hover:bg-red-500"))
);
However, it seems a bit unnecessarily to duplicate the active and hover in the final argument, so perhaps its worth considering that the M function could apply those for the end-user: M("active", "hover", "bg-red-500") would produce a string like active:hover:bg-red-500
No problem! I dug into this a little bit more and uncovered a complication that I wanted to document here. I realized that the generic type will have to generate permutations for every possible order of classes. For instance, the generic for the following backgroundColor<['dark', '2xl']>("bg-red-500") would have to generate the following permutations dark:2xl:bg-red-500, 2xl:dark:bg-red-500, since we do not know what order the user might choose. Makes the DX a little less clean, but I still think this idea could be an improvement overall.
Somewhat like the introduction of function helpers like
TW.{backgroundColor,opacity,…}
, I'm wondering if it might make sense to apply a similar pattern to variants. This could address the limitation where one can only use tailwindcss-classnames with one modifier likeT.backgroundColor('active:bg-red-500')
, where something with more modifiers likeT.backgroundColor('active:hover:bg-red-500
)` would not typecheck.Moreover, it might help reduce the amount of types overall. I'm not sure if this would improve TS performance but it seems like it might?
Example of API:
However, it seems a bit unnecessarily to duplicate the
active
andhover
in the final argument, so perhaps its worth considering that the M function could apply those for the end-user:M("active", "hover", "bg-red-500")
would produce a string likeactive:hover:bg-red-500
Or perhaps a purely type-based approach:
Would love to hear your thoughts.
The text was updated successfully, but these errors were encountered: