React Native - Tailwind CSS autocomplete in VSCode for twrnc package - react-native

Question

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?

Answer 1

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

Answer 2

- //Use TailwindCss in ReactNative:
- Install twrnc: npm install twrnc
- import tw from "twrnc";
- Be sure to install the TailWind CSS Intellisense extension in VS code
- Go to the extension settings and
add 'style' in Class Attributes
- Go to your project root folder and
manually create a file named 'tailwind.js' or 'tailwind.config.js'
- Start using TWCSS as in the docs: eg; <View style={tw`bg-gray-300
flex flex-1 px-5 pt-20`}>

Answer 3

If you haven’t already, install the Tailwind CSS IntelliSense extension.
This extension’s autocomplete and code hinting will only work on props named className or class, which React Native’s components do not have. So I’ve found that a worthwhile workaround is to implement your own versions of the React Native components and use those instead. Your version can have a className prop, which enables the suggestions from VSCode for Tailwind.
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>