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

原生微信小程序使用原子化tailwindcss

这里使用了第三方库来实现:https://weapp-tw.icebreaker.top/

官方配置步骤一: https://weapp-tw.icebreaker.top/docs/quick-start/native/install

官方配置步骤二:https://weapp-tw.icebreaker.top/docs/quick-start/native/install-plugin

我下面的操作步骤跟官方步骤(步骤一和步骤二连起来)一比一还原的,避免某天官网挂了或者教程丢了

官网上面还有框架类的配置,如uniapp配置,个人建议uniapp原生小程序建议看这个,其他的使用官方版的tailwindcss去配置就可以了,因为uniapp会编译到小程序里面,小程序里面有很多不支持原生的选择器之类的,如果项目牵扯到小程序,建议看这个文档进行配置

一. 安装与配置 tailwindcss

前言

很荣幸,我们在 weapp-tailwindcss@3.2.0 版本开始,引入了微信小程序原生支持的能力。 (其他平台的原生小程序开发,也非常容易兼容)

接下来让我们看看,如何进行使用吧!

本教程演示的是,使用微信开发者工具创建的原生 js 小程序,以及原生 js skyline 小程序使用 tailwindcss 的方式

运行环境

请确保你的 nodejs 版本 >=16.6.0。目前低于 16 的长期维护版本(偶数版本) 都已经结束了生命周期,建议安装 nodejsLTS 版本,详见 nodejs/release。

假如你安装的 nodejs 太新,可能会出现安装包不兼容的问题,这时候可以执行安装命令时,使用 --ignore-engines 参数进行 nodejs 版本的忽略 。

创建项目

打开微信开发者工具, 点击 + 创建一个项目,依次选择:

  1. AppID 使用测试号
  2. 开发模式: 小程序
  3. 后端服务: 不使用云服务
  4. 模板选择: 第二项选择 基础
  5. 选择 JS 基础模板

使用 JS 基础模板创建的项目,依然可以使用 Typescript

首先安装本插件前,我们需要把 tailwindcss 对应的环境和配置安装好。

0. 初始化 package.json

首先,假如你使用原生的 JS 模板创建的项目。

在创建的项目目录下,是没有 package.json 文件 (原生的 TS 模板有这个文件), 你需要执行命令:

npm init -y,快速创建一个 package.json 文件在你的项目下

相关文章:

原生微信小程序使用原子化tailwindcss

这里使用了第三方库来实现:https://weapp-tw.icebreaker.top/ 官方配置步骤一: https://weapp-tw.icebreaker.top/docs/quick-start/native/install 官方配置步骤二:https://weapp-tw.icebreaker.top/docs/quick-start/native/install-plugin 我下面的操作步骤跟官方步骤…...

《掌握Nmap:全面解析网络扫描与安全检测的终极指南》

 nmap # 简介(帮助) 用法:nmap [扫描类型] [选项] {目标指定内容} 简介(帮助) 用法:nmap [扫描类型] [选项] {目标指定内容} 一、目标指定: 可以传入主机名、IP 地址、网络等。 例如&a…...

k8s-Informer概要解析(2)

Client-go 主要用在 k8s 控制器中 什么是 k8s Informer Informer 负责与 kubernetes APIServer 进行 Watch 操作,Watch 的资源,可以是 kubernetes 内置资源对象,也可以 CRD。 Informer 是一个带有本地缓存以及索引机制的核心工具包&#x…...

UE5基本数据类型

bool: 表示布尔值,只有两个取值:true 或 false,用于表示逻辑条件。int8: 表示 8 位的有符号整数,范围是 −128−128 到 127127。uint8: 表示 8 位的无符号整数,范围是 00 到 255255。int16: 表示 16 位的有符号整数&am…...

Next.js 系统性教学:中间件与国际化功能深入剖析

更多有关Next.js教程,请查阅: 【目录】Next.js 独立开发系列教程-CSDN博客 目录 一、Next.js 中间件 (Middleware) 功能解析 1.1 什么是中间件? 1.2 Next.js 中间件的工作机制 1.3 中间件的功能应用 身份验证与授权 请求重定向 修改请…...

鸿蒙HarmonyOS元服务应用开发实战完全指导

内容提要 元服务概述 元服务开发流程 第一个元服务开发 元服务部署与运行 一、服务概述 1、什么是元服务 在万物互联时代,人均持有设备量不断攀升,设备种类和使用场景更加多样,使得应用开发、应用入口变得更加复杂。在此背景下&#x…...

CT中的2D、MPR、VR渲染、高级临床功能

CT中的2D、MPR、VR渲染 在CT(计算机断层扫描)中,2D、MPR(多平面重建)、VR(体积渲染)是不同的图像显示和处理技术,它们各自有独特的用途和优势。下面分别介绍这三种技术:…...

利用docker-compose来搭建flink集群

1.前期准备 (1)把docker,docker-compose,kafka集群安装配置好 参考文章: 利用docker搭建kafka集群并且进行相应的实践-CSDN博客 这篇文章里面有另外两篇文章的链接,点进去就能够看到 (2&…...

力扣打卡10:K个一组翻转链表

链接:25. K 个一组翻转链表 - 力扣(LeetCode) 这道题需要在链表上,每k个为一组,翻转,链接。 乍一看好像比较容易,其实有很多细节。比如每一组反转后怎么找到上一组的新尾,怎么找到…...

深度学习详解

深度学习(Deep Learning,DL)是机器学习(Machine Learning,ML)中的一个子领域,利用多层次(深层)神经网络来自动从数据中提取特征和规律,模仿人脑的神经系统来进…...

鸿蒙分享(一):添加模块,修改app名称图标

码仓库:https://gitee.com/linguanzhong/share_harmonyos 鸿蒙api:12 新建公共模块common 在entry的oh-package.json5添加dependencies,引入common模块 "dependencies": {"common": "file:../common" } 修改app名称&…...

【Redis】not support: redis

1、查看redis进程 2、查看是否安装redis扩展,此处以宝塔为例...

【集群划分】含分布式光伏的配电网集群电压控制【33节点】

目录 主要内容 模型研究 1.节点电压灵敏度的计算 2.Kmeans聚类划分 3.集群K值 部分代码 运行结果 下载链接 主要内容 该程序参考文献《含分布式光伏的配电网集群划分和集群电压协调控制》,基于社团检测算法,实现基于电气距离和区域电压调节能…...

嵌入式蓝桥杯学习5 定时中断实现按键

Cubemx配置 打开cubemx。 前面的配置与前文一样,这里主要配置基本定时器的定时功能。 1.在Timer中点击TIM6,勾选activated。配置Parameter Settings中的预分频器(PSC)和计数器(auto-reload Register) 补…...

【Java】类似王者荣耀游戏

r77683962/WangZheYouDianRongYao 运行效果图: 类似王者荣耀游戏运行效果图_哔哩哔哩_bilibili...

C++<基本>:union是没有构造函数和析构函数的

今天发现当我在union中包含了多个结构体时,结构体有默认构造函数时,编译报错。 问题点: union不支持构造函数和析构函数union中的元素本身也是不支持构造函数和析构函数的。包含union的结构体也不支持构造函数和析构函数。 出错代码如下&a…...

SQL中IN和NOT操作符的用法

1. IN操作符(布尔逻辑) 在SQL中,IN 是一个用于检查某个字段值是否包含在给定的多个可能值中的布尔操作符。它经常与条件表达式一起使用,通常出现在WHERE子句中。 用法: IN操作符用来确定某个字段的值是否存在于给定…...

C++平常学习用的

4.1 友元函数 4.2 友元类 5.2 类模板 7.2 虚函数dynamic_cast运算 7.2 纯虚函数和抽象类...

JAVA |日常开发中Servlet详解

JAVA |日常开发中Servlet详解 前言一、Servlet 概述1.1 定义1.2 历史背景 二、Servlet 的生命周期2.1 加载和实例化2.2 初始化(init 方法)2.3 服务(service 方法)2.4 销毁(destroy 方法) 三、Se…...

QT实战--QTreeWidget实现两种行颜色+QListWidget样式

本文主要介绍了QTreeWidget实现两种行颜色、点击打开父节点以及设置父子节点之间距离,同时附带介绍了QListWidget样式 树效果图: 列表效果图: 1.树样式的实现 1)使用代码: m_pLeftTreeWidget = new QTreeWidget(this);m_pLeftTreeWidget->setObjectName("suolue_t…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...

7.4.分块查找

一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...

【Oracle APEX开发小技巧12】

有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat(I/O Statistics)是Linux系统下用于监视系统输入输出设备和CPU使…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"&#xff0…...

Java 加密常用的各种算法及其选择

在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

【AI学习】三、AI算法中的向量

在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...

Python如何给视频添加音频和字幕

在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...