原生小程序开发如何使用 tailwindcss

Image

原生小程序开发如何使用 tailwindcss

  • 原生小程序开发如何使用 tailwindcss
    • 前言
    • 什么是 weapp-tailwindcss ?
    • 0. 准备环境以及小程序项目
    • 1. 安装与配置 tailwindcss
      • 0. 使用包管理器安装 tailwindcss
      • 1. 在项目目录下创建 postcss.config.js 并注册 tailwindcss
      • 2. 配置 tailwind.config.js
      • 3. 引入 tailwindcss
    • 2. 安装这个插件并运行
      • 安装插件
      • 执行初始化命令
      • 开始运行
    • 想要了解更多

前言

很荣幸从 weapp-tailwindcss3.2.0 版本开始

已经可以支持 微信开发者工具,直接创建的 小程序项目了 (包括 skyline 引擎)

什么是 weapp-tailwindcss ?

在我们日常的小程序开发中,由于小程序本身有自己的一套 独特的 技术规范标准。这导致你无法使用 web 中很多的特性。

你也无法 直接 使用像 tailwindcss 这种原子化 css 生成工具,来大幅加快你的开发速度。

weapp-tailwindcss 就能让你,在小程序开发中使用 tailwindcss 里的大部分 特性,加快开发小程序整体的效率。

从本质上来看,它是一个转义器。它负责把 tailwindcss 中,所采集到的类名,以及生成的结果,转化成小程序中可以接受的方式。

现在,就让我们开始使用吧!

0. 准备环境以及小程序项目

首先,你需要准备 nodejs 环境,nodejs 官方下载地址

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

然后,你可以使用 微信开发者工具 创建一个小程序项目, 原生 js/ts 或者 skylinejs/ts 项目皆可。

这样我们的前置准备工作就完成了!

1. 安装与配置 tailwindcss

这里我们以最基础的 小程序 js 项目为例,进行操作

0. 使用包管理器安装 tailwindcss

首先,假如你项目目录下,没有 package.json 文件, 你需要执行命令,或者手动创建一下:

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

然后执行:

# 使用你喜欢的任意 npm / yarn / pnpm
npm install -D tailwindcss postcss
# 初始化 tailwind.config.js 文件
npx tailwindcss init

这样 tailwindcss 就被安装到你项目本地了

1. 在项目目录下创建 postcss.config.js 并注册 tailwindcss

内容如下:

module.exports = {plugins: {tailwindcss: {},},
};

这个文件和 tailwind.config.js 平级

2. 配置 tailwind.config.js

tailwind.config.jstailwindcss 的配置文件,我们可以在里面配置 tailwindcss 的各种行为。

这里给出了一份 微信小程序 通用示例,具体要根据你自己项目的目录结构进行配置

/** @type {import('tailwindcss').Config} */
module.exports = {// 假如你使用 ts 开发,则需要在下方的 glob 表达式中,把 ts 后缀配置进去content: ["**/*.{js,wxml}", "!node_modules/**", "!dist/**"],corePlugins: {// 小程序不需要 preflight,因为这主要是给 h5 的,如果你要同时开发小程序和 h5 端,你应该使用环境变量来控制它preflight: false,},
};

3. 引入 tailwindcss

在你的小程序项目入口 app.wxss 文件中,引入 tailwindcss 使它在小程序全局生效

@tailwind base;
@tailwind components;
@tailwind utilities;

接下来,赶紧进入下一步,安装 weapp-tailwindcss 并运行吧!

2. 安装这个插件并运行

安装插件

在项目目录下,执行:

# npm / yarn /pnpm
npm i -D weapp-tailwindcss @weapp-tailwindcss/cli

这样 weapp-tailwindcsscli 工具就被安装在你的本地了

执行初始化命令

在命令行中运行

npx weapp-tw init

对现有的原生小程序项目,进行 weapp-tailwindcss 的初始化

执行后,会发现主要有三个文件改动,CLI 主要做了 3 件事情:

  • 创建 weapp-tw.config.js 文件,这个是 @weapp-tailwindcss/cli 的配置文件
  • 修改 package.json, 添加 devbuild 开发和构建脚本, 和 postinstall 脚本
  • 修改 project.config.json 内容,来适配构建产物

开始运行

使用 npm run dev 进入开发模式, 此时是有热更新的,主要用于开发

使用 npm run build 进行构建

构建产物默认都在 dist 目录

然后打开微信开发者工具,直接导入这个目录,即可预览效果!

想要了解更多

当然这个解决方案,其实不止限于微信开发者工具这个平台,也可以通过配置,适配更多的平台。

假如你想了解更多,欢迎访问 weapp-tw.icebreaker.top

或在 weapp-tailwindcss/discussions 中,与我们进行讨论,发表你的建议和意见。

PR is also Welcome!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/700663.html

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

相关文章

SpringBoot项目的项目部署全过程

一、前端 安装nginx 1.将提前准备好的nginx的安装包上传到Linux中/opt目录下(我用的是Xftp) 2.解压 2.1:在xshell中解压该文件: tar -zxvf nginx-1.20.1.tar.gz 2.2:进入解压后的目录 cd nginx-1.20.1/ 2.3:安装需要的依赖 yum -y install zlib zlib-devel openssl openssl-de…

HTML特殊字符

特殊字符 有特殊含义的字符成为字符实体 对于有特殊含义的字符,需要通过转移字符来表示 <span> <br><a href"http://www.atguigu.com">我 爱 前端</a> <br>&amp;amp; 效果

【经验总结】超算互联网服务器 transformers 加载本地模型

1. 背景 使用 超算互联网 的云服务&#xff0c;不能连接外网&#xff0c;只能把模型下载到本地&#xff0c;再上传上去到云服务。 2. 模型下载 在 模型中 https://huggingface.co/models 找到所需的模型后 点击下载 config.json pytorch_model.bin vocab.txt 3. 上传模型文…

AcqKnowledge 5.0使用方法

Biopac 数据导入 matlab 处理方法 第一步&#xff1a;在 AcqKnowledge 软件中&#xff0c;将数据通道的 mark 信息导入到 Graph&#xff0c;并将数据存储为 acq3 的格式 第二步&#xff1a;MATLAB中读取acq3文件脚本 clc clear %%%所有被试这一层路径 pathsub fullfile(file…

PHP黑魔法之md5绕过

php本身是一种弱语言,这个特性决定了它的两个特点: 输入的参数都是当作字符串处理变量类型不需要声明,大部分时候都是通过函数进行类型转化php中的判断有两种: 松散比较:只需要值相同即可,类型不必相同,不通类型比较会先转化为同类型,比如全数字字符串和数字比较,会比…

【数据可视化01】matplotlib实例3之数据统计

目录 一、引言二、实例介绍1.百分位数为横条形图2.箱线图定制化3.带有自定义填充颜色的箱线图4.箱线图5.箱线图和小提琴图6.二维数据集的置信椭圆 一、引言 matplotlib库 可以用来创建各种静态、动态、交互式的图形&#xff0c;并广泛应用于数据分析和数据可视化领域。 二、实…

ip addr 或 ip address 是 Linux 系统中的一个命令,用于显示或修改网络接口的地址信息。

ip addr 或 ip address 是 Linux 系统中的一个命令&#xff0c;用于显示或修改网络接口的地址信息。这个命令是 iproute2 软件包的一部分&#xff0c;通常在现代 Linux 发行版中都是预装的。 当你运行 ip addr 或 ip address 命令时&#xff0c;你会看到系统上所有网络接口的地…

【C/C++笔试练习】DNS劫持、三次握手、TCP协议、HTTPS、四次挥手、HTTP报文、拥塞窗口、POP3协议、UDP协议、收件人列表、养兔子

文章目录 C/C笔试练习选择部分&#xff08;1&#xff09;DNS劫持&#xff08;2&#xff09;三次握手&#xff08;3&#xff09;TCP协议&#xff08;4&#xff09;HTTPS&#xff08;5&#xff09;四次挥手&#xff08;6&#xff09;HTTP报文&#xff08;7&#xff09;拥塞窗口&a…

软件工程期末复习(6)需求分析的任务

需求分析 需求分析的任务 “建造一个软件系统的最困难的部分是决定要建造什么……没有别的工作在做错时会如此影响最终系统&#xff0c;没有别的工作比以后矫正更困难。” —— Fred Brooks 需求难以建立的原因&#x…

C++ 关键字 :using

在 C 庞大语法体系中&#xff0c; using 关键字十分的灵活多用&#xff0c;它可不简单。 除了常规的引入命名空间之外&#xff0c;它还可用于引入枚举类型枚举器、定义常规类型别名、模板类型别名等。在定义常规类型别名方面与C语言中的typedef、#define与之相似&#xff0c;但…

wangEditor富文本编辑器与layui图片上传

记录&#xff1a;js 显示默认的wangEditor富文本编辑器内容和图片 <style>body {background-color: #ffffff;}.layui-form-select dl{z-index:100000;} </style> <div class"layui-form layuimini-form"><div class"layui-form-item"…

求学生平均成绩(C语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>//声明平均数函数average; float average(float score[10]);int main() {//初始化变量值&#xff1b;float score[10], aver;int i 0;//填充数组&#xff1b;pr…