React Native - 用于 twrnc 包的 VSCode 中的 Tailwind CSS 自动完成

我正在使用 twrnc 包在 React Native 项目中使用 Tailwind CSS。

语法是,

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

但是我没有从 VSCode 中获得 Tailwind CSS 类的建议。任何人都可以建议或帮助获得课程建议吗?

stack overflow React Native - Tailwind CSS autocomplete in VSCode for twrnc package
原文答案
author avatar

接受的答案

如果您还没有安装 Tailwind CSS IntelliSense extension

此扩展的自动完成和代码提示仅适用于名为 classNameclass 的道具,而 React Native 的组件没有这些道具。所以我发现一个有价值的解决方法是实现你自己版本的 React Native 组件并使用它们来代替。你的版本可以有一个 className 属性,它支持来自 VSCode 的 Tailwind 建议。

例如,您的 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;

以及用法:

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>

答案:

作者头像

首先安装 Tailwind CSS IntelliSense 扩展。然后在设置中,给类属性添加样式

作者头像
 - //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`}>