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

然后就可以了

相关推荐
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
G等你下课6 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登7 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
FogLetter9 小时前
深入浅出React-Router-Dom:从前端路由到SPA架构的华丽转身
前端·react.js
Dream耀9 小时前
useReducer:React界的"灭霸手套",一个dispatch搞定所有状态乱局
前端·javascript·react.js
码间舞9 小时前
你还在用useState保存表单数据?来看React 19是如何做的!【useActionState实战详解】
react.js
前端设计诗10 小时前
对React官网《Virtual DOM 及内核》注解:其实Virtual DOM 就藏在在代码行间
前端·react.js·前端框架
遂心_11 小时前
React初学者必备:用“状态管家”Reducer轻松管理复杂状态!
前端·javascript·react.js
FanetheDivine11 小时前
解决@ant-design/icons导致的样式异常
react.js·ant design