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

然后就可以了

相关推荐
小p17 分钟前
react学习2:react中常用的hooks
前端·react.js
.生产的驴36 分钟前
React 模块化Axios封装请求 统一响应格式 请求统一处理
前端·javascript·react.js·前端框架·json·ecmascript·html5
东东2333 小时前
搭建 Vite + React 服务端渲染(SSR)环境
前端·javascript·react.js
Asort3 小时前
React框架深度剖析:设计理念、核心机制与现代生态对比
前端·javascript·react.js
boboj17 小时前
Vue过渡至React的基础理解
前端·react.js
明仔的阳光午后21 小时前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react
TimelessHaze1 天前
🚀 一文吃透 React 性能优化三剑客:useCallback、useMemo 与 React.memo
前端·javascript·react.js
青天诀1 天前
React 中 setTimeout 获取不到最新 State 的原因及解决方案
前端·react.js
西木之斤1 天前
vue和react实例简单对比
vue.js·react.js
CodeCraft Studio1 天前
前端表格工具AG Grid 34.3 发布:重磅引入AI工具包,全面支持 React 19.2!
前端·人工智能·react.js·angular·ag grid·前端表格工具·透视分析