Typed classnames for autocompletion

I like this API the most from the available Tailwind / RN projects but it’s a bit sad to lose the ability for auto-completion.

What about going from this:

tailwind('bg-blue-200 px-3 py-1 rounded-full')

to something like this:

tailwind('bg-blue-200', 'px-3', 'py-1', 'rounded-full')

[jonlambert]

For those who want a quick copy and paste:

"tailwindCSS.experimental.classRegex": ["tailwind\\('|\"([^'|\")]*)"]

^ add to your VS Code settings.json file. I’ve adjusted the regex to pick up single or double quotes.

[ecklf]

@matepapp nice find!

However, I can’t think of a sensible TypeScript solution that would not require the API change I mentioned above. Your current implementation would only allow one className in the tailwind function unless you generate all combinations of className strings.

My proposal would look something like this:

import JSON from "./styles.json";
type Keys = keyof typeof JSON;

const tailwind = (...props: Keys[]) => {
  return props.reduce(
    (styles, curr) => ({
      ...styles,
      ...JSON[curr],
    }),
    {}
  );
}