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

然后就可以了

相关推荐
WEI_Gaot13 小时前
zustand 基础和进阶
前端·react.js
土豆125013 小时前
构建高级半圆形进度条:SVG 与 纯 CSS 方案深度解析与完整代码
css·react.js·svg
前端大白话13 小时前
炸裂!10个 React 实战技巧,让你的代码从“青铜”秒变“王者”
前端·javascript·react.js
WEI_Gaot13 小时前
React 19 Props 和 react-icons 和 事件处理函数
前端·react.js
Deepsleep.13 小时前
react和vue的区别之一
javascript·vue.js·react.js
WEI_Gaot13 小时前
react19 的项目创建和组件使用
前端·react.js
vvilkim18 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
莫问alicia18 小时前
react 常用钩子 hooks 总结
前端·javascript·react.js
在澳门喝茶的芦竹21 小时前
React高阶组件——React.momo
javascript·react.js
Jet_closer_burning21 小时前
axios封装
前端·javascript·vue.js·react.js·ajax