react native中使用tailwind并配置自动补全

javascript 复制代码
import { View, Text } from 'react-native';
import tw from 'twrnc';

const MyComponent = () => (
  <View style={tw`p-4 android:pt-2 bg-white dark:bg-black`}>
    <Text style={tw`text-md text-black dark:text-white`}>Hello World</Text>
  </View>
);

当然也支持条件变量

javascript 复制代码
// pass multiple args
tw.style('text-sm', 'bg-blue-100', 'flex-row mb-2');
// falsy stuff is ignored, so you can do conditionals like this
tw.style(isOpen && 'bg-blue-100');

重要的来了!配置vscode的补全

参考自React Native - Tailwind CSS autocomplete in VSCode for twrnc package

补全插件还是用的Tailwind CSS IntelliSense,需要添加vscode的配置并手动新建两个空文件

在下图添加

新建一个空文件tailwind.config.js

然后就可以了

相关推荐
xiaopengbc19 小时前
在 React 中如何使用 useMemo 和 useCallback 优化性能?
前端·javascript·react.js
伍哥的传说19 小时前
React Device Detect 完全指南:构建响应式跨设备应用的最佳实践
react.js·前端框架·react hooks·操作系统识别·device-detect·react设备检测·浏览器检测
GISer_Jing19 小时前
React 18 过渡更新:并发渲染的艺术
前端·javascript·react.js
骑自行车的码农1 天前
React SSR 技术解读
前端·react.js
遂心_1 天前
React中的onChange事件:从原理到实践的全方位解析
前端·javascript·react.js
潘小安1 天前
『译』资深前端开发者如何看待React架构
前端·react.js·面试
GISer_Jing1 天前
React 18的createRoot与render全面对比
前端·react.js·前端框架
我叫汪枫1 天前
React Hooks原理深度解析与高级应用模式
前端·react.js·前端框架