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

然后就可以了

相关推荐
东北南西2 小时前
手写React状态hook
前端·javascript·react.js
醉方休9 小时前
React Fiber 风格任务调度库
前端·javascript·react.js
知识分享小能手14 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
学习3人组14 小时前
React 组件基础与事件处理
前端·javascript·react.js
qczg_wxg19 小时前
React Native的动画系统
javascript·react native·react.js
qczg_wxg19 小时前
React Native常用的API
react native
周小码20 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
Winson℡21 小时前
在 React Native 层禁止 iOS 左滑返回(手势返回/手势退出)
react native·react.js·ios
学习3人组1 天前
Vue 与 React 全面功能对比
前端·vue.js·react.js
D11_1 天前
【React】Redux和React
前端·javascript·react.js