当前位置: 首页 > 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 文件在你的项目下

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

相关文章:

  • 《掌握Nmap:全面解析网络扫描与安全检测的终极指南》
  • k8s-Informer概要解析(2)
  • UE5基本数据类型
  • Next.js 系统性教学:中间件与国际化功能深入剖析
  • 鸿蒙HarmonyOS元服务应用开发实战完全指导
  • CT中的2D、MPR、VR渲染、高级临床功能
  • 利用docker-compose来搭建flink集群
  • 力扣打卡10:K个一组翻转链表
  • 深度学习详解
  • 鸿蒙分享(一):添加模块,修改app名称图标
  • 【Redis】not support: redis
  • 【集群划分】含分布式光伏的配电网集群电压控制【33节点】
  • 嵌入式蓝桥杯学习5 定时中断实现按键
  • 【Java】类似王者荣耀游戏
  • C++<基本>:union是没有构造函数和析构函数的
  • SQL中IN和NOT操作符的用法
  • C++平常学习用的
  • JAVA |日常开发中Servlet详解
  • QT实战--QTreeWidget实现两种行颜色+QListWidget样式
  • RPA在IT运维中的实践:自动化监控与维护
  • C# 设置方法执行超时,则执行下一个方法
  • 【iOS】UIImagePickerController
  • 现代企业营销模式创新:链动 2+1 模式 AI 智能名片商城小程序的应用与价值
  • springboot+Loki+Loki4j+Grafana搭建轻量级日志系统
  • 服务器守护进程化
  • 灵途科技亮相2024世界传感器大会 分享光纤光源技术突破
  • day35—蓝桥杯2024年第16届校赛模拟第二期-T4(最小花费)
  • 【CSS in Depth 2 精译_068】11.2 颜色的定义(下):CSS 中的各种颜色表示法简介
  • 游戏引擎学习第38天
  • P1223 排队接水(贪心)