React Native - Tailwind CSS autocomplete in VSCode for twrnc package-CodePudding

I am using twrnc package for using Tailwind CSS in React Native Project.

The syntax for that is,

<View style={styles.container}>
  <Text style={tw.style`text-green-500 font-bold`}>Open up App.js to start working on your app!</Text>
  <StatusBar style="auto" />
</View>

But I am not getting suggestions from VSCode for Tailwind CSS classes. Can anyone suggest or help to get suggestions for classes?

CodePudding user response：

I’ve found that a good workaround is to implement your own versions of the React Native components and use those instead. Your version will have a className prop, which enables the suggestions from VSCode for Tailwind. Edit: I believe naming the prop class would also work.

For example, your implementation of Text:

import { Text as TextRn } from "react-native";
import tw from "twrnc";

const Text = ({ className, children, ...rest }) => {
  return <TextRn style={tw.style(className)} {...rest}>{children}</TextRn>
};

export default Text;

And the usage:

import View from "./src/Text"; // or wherever you added the Text.js file

// ...

<Text className="text-green-500 font-bold">Open up App.js to start working on your app!</Text>

CodePudding user response：

First install Tailwind CSS IntelliSense extenstion. Then in the setting, add style to class attributes