当前位置: 首页 > news >正文

react native中使用tailwind并配置自动补全

  • 使用的第三方库是tailwind-react-native-classnames,同类的也有tailwind-rn,但是我更喜欢前者
  • 官方demo:
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>
);

当然也支持条件变量

// 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
在这里插入图片描述
然后就可以了
在这里插入图片描述

http://www.lryc.cn/news/277158.html

相关文章:

  • 数据分析——火车信息
  • Bert-vits2最终版Bert-vits2-2.3云端训练和推理(Colab免费GPU算力平台)
  • Asp .Net Web应用程序(.Net Framework4.8)网站发布到IIS
  • vue element plus Typography 排版
  • 理论U3 决策树
  • Redis 常用操作
  • c# 使用Null合并操作符例子
  • 【Docker】docker部署conda并激活环境
  • HarmonyOS@Link装饰器:父子双向同步
  • 【idea】idea插件编写教程,博主原创idea插件 欢迎下载
  • 深入理解 Hadoop (四)HDFS源码剖析
  • 【Vue3+React18+TS4】1-1 : 课程介绍与学习指南
  • Nacos与Eureka的区别详解
  • 【算法刷题】Day28
  • 深入了解pnpm:一种高效的包管理工具
  • QEMU源码全解析 —— PCI设备模拟(1)
  • Vue-10、Vue键盘事件
  • 胡圆圆的暑期实习经验分享
  • 基于uniapp封装的table组件
  • Git删除远程仓库某次提交记录后的所有提交
  • 强化学习10——免模型控制Q-learning算法
  • 【数据库】CRUD常用函数UNION 和 UNION ALL
  • Adding Conditional Control to Text-to-Image Diffusion Models——【论文笔记】
  • Python与人工智能
  • 【Docker】Docker基础
  • linux异常情况,排查处理中
  • Spring Boot参数校验方案
  • 【漏洞复现】ActiveMQ反序列化漏洞(CVE-2015-5254)
  • 面试题:MySQL误删表数据,如何快速恢复丢失的数据?
  • 李沐之神经网络基础