当前位置: 首页 > 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.mrgr.cn/news/79916.html

相关文章:

  • RK3588 Linux实例应用(2)——SDK与编译
  • SpringBoot【十】mybatis之xml映射文件>、<=等特殊符号写法!
  • C++ 泛编程—— 自动推导类型 auto
  • 【软件工程】一篇入门UML建模图(状态图、活动图、构件图、部署图)
  • 网络应用技术 实验八:防火墙实现访问控制(华为ensp)
  • Mysql体系架构剖析——岁月云实战笔记
  • 【数据结构——查找】顺序查找(头歌实践教学平台习题)【合集】
  • Ultra-Fast-Lane-Detection复现、部署及训练
  • kill crash原因分析
  • C++ 泛编程 —— 函数模板(中)
  • rman 迁移数据到其他机器实际实验
  • hive—常用的日期函数
  • ES6 混合 ES5学习记录
  • 【数据结构——栈与队列】链栈的基本运算(头歌实践教学平台习题)【合集】
  • 【蓝桥杯每日一题】砍竹子
  • 黑马商城微服务复习(6)
  • MVC配置文件及位置
  • 【C语言】浮点数的原理、整型如何转换成浮点数
  • 计算机组成原理复习
  • 【漏洞复现】CVE-2022-26619 CVE-2022-32994 Arbitrary File Upload
  • 多发电站实现光伏发电预测的统一管理模式
  • CSDN原力值说明
  • mac 安装CosyVoice (cpu版本)
  • 通用定时器之输出比较的功能
  • 0001.简易酒店管理系统后台
  • MOTR: End-to-End Multiple-Object Tracking with Transformer