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

然后就可以了

相关推荐
旭久6 小时前
react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除(无难度上手)
前端·javascript·react.js
windyrain6 小时前
ant design pro 模版简化工具
前端·react.js·ant design
GISer_Jing7 小时前
React-Markdown详解
前端·react.js·前端框架
太阳花ˉ7 小时前
React(九)React Hooks
前端·react.js
旭久9 小时前
react+antd封装一个可回车自定义option的select并且与某些内容相互禁用
前端·javascript·react.js
阿丽塔~9 小时前
React 函数组件间怎么进行通信?
前端·javascript·react.js
前端菜鸟来报道10 小时前
前端react 实现分段进度条
前端·javascript·react.js·进度条
傻球13 小时前
Jotai 使用详解:React 轻量级状态管理库
前端·react.js
市民中心的蟋蟀16 小时前
第四章: 使用订阅来共享模块状态
前端·javascript·react.js
水煮白菜王17 小时前
首屏加载时间优化解决
前端·javascript·react.js