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?
- //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`}>
manually create a file named 'tailwind.js' or 'tailwind.config.js' this is what I missed
npx tailwindcss init this will create empty one with basic content.
First install Tailwind CSS IntelliSense extenstion. Then in the setting, add style to class attributes
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>
I'll extend @Brandon's answer ( https://stackoverflow.com/a/71718286/7733418 ).
After installing Tailwind CSS IntelliSense extension, what worked for me was to add a new attribute named "style" under the extension's settings.
As others have suggested, use TailwindCSS IntelliSense. However, for hinting within special attributes or functions, custom configuration is required. By default, hints will only appear in HTML class and className attributes, but this can be extended to JavaScript functions, additional HTML attributes, or even custom regex patterns.
Specifically, for displaying hints when passing parameters in functions, up until v0.14.9, could only reference them using regex by classRegex. However, from v0.14.10 onward, this was extended with a simpler classFunctions setting.
Specifically, for the twrnc package, I would follow the settings below based on the different IntelliSense versions.
For the TailwindCSS IntelliSense to work within the tw function added by twrnc, you need to add the function name to tailwindCSS.classFunctions, like this:
{
"tailwindCSS.classFunctions": ["tw", "tw.style"]
}
Note: This only replaces classRegex; however, using classAttributes alongside it is still recommended.
However, if you want it to work in the style attribute within an HTML structure, you need to add the following alongside the default class and className:
{
"tailwindCSS.classAttributes": [
// ...
"style"
],
}
Additionally, you can use the classRegex expression you mentioned to declare the hint to be requested when calling the function, based on twrnc's recommendation:
{
"tailwindCSS.experimental.classRegex": [
"tw`([^`]*)",
["tw.style\\(([^)]*)\\)", "'([^']*)'"]
]
}
