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.hqwc.cn/news/334193.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在生产环境中使用uWSGI来运行Flask应用

安装uwsgi pip install uwsgi -i https://pypi.tuna.tsinghua.edu.cn/simple安装不上则使用以下命令&#xff1a; conda install -c conda-forge uwsgi 当您成功安装uwsgi后&#xff0c;您可以通过以下步骤来测试uwsgi是否安装成功&#xff1a; 创建一个Python脚本&#xff…

【angular教程240105】02绑定属性 绑定数据、条件判断、加载图片、【ngClass】 【ngStyle】、Angular管道

【angular】02绑定属性 绑定数据、条件判断、加载图片、【ngClass】 【ngStyle】、Angular管道 0 一些基础的概念 标记为可注入的服务 在Angular中&#xff0c;一个服务是一个通常提供特定功能的类&#xff0c;比如获取数据、日志记录或者业务逻辑等。标记为可注入的服务意味着…

变电站综合自动化监控系统在某物流园35kV变电站中应用

摘 要&#xff1a;Acrel-1000变电站综合自动化系统&#xff0c;是我司根据电力系统自动化及无人值守的要求&#xff0c;总结国内外的研究和生产的先进经验&#xff0c;专门研制出的新一代电力监控系统。本系统具有保护、遥测、遥信、遥脉、遥调、遥控功能&#xff0c;可实现无人…

leetcode 每日一题 2024年01月09日 字符串中的额外字符

题目 字符串中的额外字符 给你一个下标从 0 开始的字符串 s 和一个单词字典 dictionary 。你需要将 s 分割成若干个 互不重叠 的子字符串&#xff0c;每个子字符串都在 dictionary 中出现过。s 中可能会有一些 额外的字符 不在任何子字符串中。 请你采取最优策略分割 s &…

python 多线程 守护线程

daemon线程&#xff1a;守护线程&#xff0c;优先级别最低&#xff0c;一般为其它线程提供服务。通常&#xff0c;daemon线程体是一个无限循环。如果所有的非daemon线程(主线程以及子线程&#xff09;都结束了&#xff0c;daemon线程自动就会终止。t.daemon 属性&#xff0c;设…

STM32H5培训(二)性能提升与功耗优化

文章目录 1. 前言2. 性能提升3. 功耗优化参考&#xff1a; 1. 前言 本篇主要介绍STM32H5系列的性能提升和功耗优化方面的具体表现。H5系列相比于F4系列在性能和功能上有较大的升级&#xff0c;包括更强的内核、更高的主频、更快的flash访问速度、更丰富的通信接口和先进的安全…

算法回忆录——排序

文章目录 1. 插入排序2. 选择排序3. 冒泡排序4. 希尔排序5. 归并排序6. 快速排序7. 堆排序8. 计数排序9. 桶排序10. 基数排序 1. 插入排序 分为两个序列&#xff0c;前面一个序列是排好序的&#xff0c;后面一个序列是未排好的。未排好的序列的第一个元素&#xff08;a&#x…

图像处理中的DCT变换

图像处理中的DCT变换 Discrete Cosine Transform&#xff0c;离散余弦变换。 来源及公式推导&#xff0c;可以查看下面链接&#xff0c;介绍的比较详细&#xff0c;这里就不再重复说明了&#xff1a; 详解离散余弦变换&#xff08;DCT&#xff09; - 知乎 (zhihu.com)DCT变换…

鸿蒙系统应用开发之开发准备

今天我们来聊一聊鸿蒙系统应用开发之前&#xff0c;要做什么准备工作&#xff0c;如下图所示&#xff0c;我们要做的就是安装DevEco Studio&#xff0c;然后配置开发环境。 老规矩&#xff0c;拍拍手&#x1f44f;&#xff0c;上菜。 安装DevEco Studio 首先我们打开链接HUAWEI…

ai电话呼叫系统的功能有哪些,能帮到我们什么?呼叫系统

人工智能产品的研发&#xff0c;是为了帮助企业更好的生存&#xff0c;更好的利润放大&#xff0c;而不是用于不正规的工作&#xff0c;现在的电话呼叫中心软件让企业员工从简单重复的工作中得以解放&#xff0c;那电话呼叫系统的强大功能有哪些&#xff1f; 知识自学习&#x…

C++ Web框架Drogon初体验笔记

这段时间研究了一下C的Web框架Drogon。从设计原理上面来说和Python的Web框架是大同小异的&#xff0c;但是难点在于编译项目上面&#xff0c;所以现在记录一下编译的过程。下面图是我项目的目录。其中include放的是头文件&#xff0c;src放的是视图文件&#xff0c;static放的是…

Jeecg创建表单页面步骤

1.在Online表单开发里面新建一个表单页面&#xff0c;可以修改数据库属性、页面属性、校验字段、外键、索引&#xff0c;新建完成之后然后同步数据库 2.选中该表&#xff0c;然后生成代码&#xff0c;可以先把代码放在桌面&#xff0c;然后将文件夹是包名称的文件复制到后端代…