React Native - Tailwind CSS 在 VSCode 中为 twrnc 包自动完成

Question

我正在使用 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 类的建议。任何人都可以建议或帮助获得类的建议吗？

Answer 1

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

此扩展的自动完成和代码提示仅适用于名为 className 或 class 的道具，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>

Answer 2

首先安装 Tailwind CSS IntelliSense 扩展。然后在setting中，给class属性添加样式

React Native - Tailwind CSS 在 VSCode 中为 twrnc 包自动完成

React Native - Tailwind CSS autocomplete in VSCode for twrnc package

npm

react-native

tailwind-css