[SOLVED] React Native - Tailwind CSS autocomplete in VSCode for twrnc package

React Native - Tailwind CSS autocomplete in VSCode for twrnc package

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?

Solution

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>