Typed classnames for autocompletion

[ecklf]

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')

[matepapp]

I have an idea of how to support a typed API, but we have to migrate to TypeScript in that case. From TypeScript 2.9 you can import JSON modules in TS files with full typed support. We can create a tailwind() method where we expose the keys of the JSON and get amazing autocompletion and type-safety ✨

[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],
    }),
    {}
  );
}

[matepapp]

Yes, this was only just a quick example to demonstrate the possibility of type-safety. Your solution is definitely a step ahead, but I think we should support regular string type as well to keep the API backward compatible. Switching based on the type could be a temporary workaround. What do you think?

I might can create a draft pull request next week if it’s okay for you @vadimdemedes

[ecklf]

Well we could either add an additional function to the core or add readme instructions on how to achieve this with a custom tailwind function (would be neat if useVariables would get exported then). I think the opt-in instruction might be the better choice since it wouldn't force the codebase to TypeScript.

[vadimdemedes]

@matepapp Yeah, I think something like that would work. Would be still great to preserve support for specifying multiple classes in one string for people that don't care about autocomplete (like me).

The only thing I'm wondering about is how will it work with custom configs?

[tommulkins]

@vadimdemedes You may be interested in following this Tailwind Intellisense issue (https://github.com/tailwindcss/intellisense/issues/129) in regards to this.

[vadimdemedes]

@tommulkins Thanks for linking it here!

[leggomuhgreggo]

I think this might have just become more feasible with the improvements in TS 4.1

https://twitter.com/diegohaz/status/1309489079378219009

[gitstud]

Is there a PR on the horizon for this?

[ecklf]

There is now a way to achieve this with the official VSCode extension.
https://twitter.com/ecklflorentin/status/1344242188574720000

[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.

[tommulkins]

To make intellisense work in a tailwind-rn project, i.e. style={tailwind('mb-1')} I use the following:

  /* TailwindCSS */
  "tailwindCSS.experimental.classRegex": ["tailwind\\('([^)]*)\\')", "'([^']*)'"]

[ecklf]

I think we can close this issue 👍🏻

[lyzMaster]

I must run npm install tailwindcss to have Tailwind CSS IntelliSense autocomplete feature, can I ignore this step?

[ecklf]

I must run npm install tailwindcss to have Tailwind CSS IntelliSense autocomplete feature, can I ignore this step?

Afaik you only need a tailwind.config.js in your project root for IntelliSense to work.

[tommulkins]

I must run npm install tailwindcss to have Tailwind CSS IntelliSense autocomplete feature, can I ignore this step?

You can run npx tailwindcss init instead to make your tailwind.config.js file.

[lyzMaster]

I must run npm install tailwindcss to have Tailwind CSS IntelliSense autocomplete feature, can I ignore this step?

You can run npx tailwindcss init instead to make your tailwind.config.js file.

Before this, I have run npx tailwindcss init and so I got tailwind.config.js, but IntelliSense still not work and I got this error in the OUTPUT of vscode(I tried restarting vscode):

And I check out doc of Tailwindcss IntelliSense, which says: In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.js in your workspace.. So I try npm install tailwindcss, and after restarting vscode, autocomplete works. So I guess maybe IntelliSense check package.json -> dependencies, if "tailwindcss" in dependencies, IntelliSense works?

[ecklf]

Seems you need to have it installed then. Note that the autocomplete will adhere to your tailwind configuration and not to tailwind-rn's compatibility limitations. You can disable core plugins for this.

[harshjadon9]

To make intellisense work in a tailwind-rn project, i.e. style={tailwind('mb-1')} I use the following:

  /* TailwindCSS */
  "tailwindCSS.experimental.classRegex": ["tailwind\\('([^)]*)\\')", "'([^']*)'"]

this isn't working for me...

i have pasted the above in setting.json

My tailwind.js

import { create } from 'tailwind-rn';
import styles from '../styles.json';

const { tailwind, getColor } = create(styles);
export { tailwind, getColor };

My home.js

...
import { getColor, tailwind } from '../tailwind';

const home = () =>{
    return(
        <View>
            <Text>hi there</Text>
            <Text style={tailwind('mb-1')}>hi there</Text>
        </View>
    )
}

export default home

@tommulkins , @jonlambert or anyone could please resolve this

[tommulkins]

To make intellisense work in a tailwind-rn project, i.e. style={tailwind('mb-1')} I use the following:

  /* TailwindCSS */
  "tailwindCSS.experimental.classRegex": ["tailwind\\('([^)]*)\\')", "'([^']*)'"]

this isn't working for me...

i have pasted the above in setting.json

My tailwind.js

import { create } from 'tailwind-rn';
import styles from '../styles.json';

const { tailwind, getColor } = create(styles);
export { tailwind, getColor };

My home.js

...
import { getColor, tailwind } from '../tailwind';

const home = () =>{
    return(
        <View>
            <Text>hi there</Text>
            <Text style={tailwind('mb-1')}>hi there</Text>
        </View>
    )
}

export default home

@tommulkins , @jonlambert or anyone could please resolve this

I currently use tailwind-react-native-classnames with the following regex settings in my project:

vscode/settings.json

{
  /* TailwindCSS */
  "tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)",
    "`([^`]*)",
    ["tw.style\\(([^)]*)\\)", "'([^']*)'"]
  ]
}

I believe that last value in the array will do the trick, "'([^']*)'"

[karimessouabni]

You need to open the VS Code setting file as a json. It should be under this Path (~/Library/Application Support/Code/User/settings.json)

Then if you're using "import tw from 'twrnc';" and your code looks like style={tw'min-w-full '}

update the section of tailwind on your setting file as follows :

"tailwindCSS.classAttributes": [ "class", "className", "ngClass" ], "tailwindCSS.experimental.classRegex": ["style={tw\\('|\"([^'|\")]*)"], "tailwindCSS.experimental.configFile": null