React Native - Tailwind CSS autocomplete in VSCode for twrnc package

user_10971575 0
Viewed 1011

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?

tailwind-css npm react-native
2 Answers

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

user_186929060

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>
user_23780780
Related