原生小程序开发如何使用 tailwindcss
- [原生小程序开发如何使用 tailwindcss](#原生小程序开发如何使用 tailwindcss "#%E5%8E%9F%E7%94%9F%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-tailwindcss")
- 前言
- [什么是
weapp-tailwindcss
?](#什么是 weapp-tailwindcss ? "#%E4%BB%80%E4%B9%88%E6%98%AF-weapp-tailwindcss-") - [0. 准备环境以及小程序项目](#0. 准备环境以及小程序项目 "#0-%E5%87%86%E5%A4%87%E7%8E%AF%E5%A2%83%E4%BB%A5%E5%8F%8A%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%A1%B9%E7%9B%AE")
- [1. 安装与配置
tailwindcss
](#1. 安装与配置 tailwindcss "#1-%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE-tailwindcss")- [0. 使用包管理器安装
tailwindcss
](#0. 使用包管理器安装 tailwindcss "#0-%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8%E5%AE%89%E8%A3%85-tailwindcss") - [1. 在项目目录下创建
postcss.config.js
并注册tailwindcss
](#1. 在项目目录下创建 postcss.config.js 并注册 tailwindcss "#1-%E5%9C%A8%E9%A1%B9%E7%9B%AE%E7%9B%AE%E5%BD%95%E4%B8%8B%E5%88%9B%E5%BB%BA-postcssconfigjs-%E5%B9%B6%E6%B3%A8%E5%86%8C-tailwindcss") - [2. 配置
tailwind.config.js
](#2. 配置 tailwind.config.js "#2-%E9%85%8D%E7%BD%AE-tailwindconfigjs") - [3. 引入
tailwindcss
](#3. 引入 tailwindcss "#3-%E5%BC%95%E5%85%A5-tailwindcss")
- [0. 使用包管理器安装
- [2. 安装这个插件并运行](#2. 安装这个插件并运行 "#2-%E5%AE%89%E8%A3%85%E8%BF%99%E4%B8%AA%E6%8F%92%E4%BB%B6%E5%B9%B6%E8%BF%90%E8%A1%8C")
- 想要了解更多
前言
很荣幸从 weapp-tailwindcss
的 3.2.0
版本开始
已经可以支持 微信开发者工具
,直接创建的 小程序项目了 (包括 skyline
引擎)
什么是 weapp-tailwindcss
?
在我们日常的小程序开发中,由于小程序本身有自己的一套 独特的 技术规范标准。这导致你无法使用 web
中很多的特性。
你也无法 直接 使用像 tailwindcss
这种原子化 css
生成工具,来大幅加快你的开发速度。
而 weapp-tailwindcss
就能让你,在小程序开发中使用 tailwindcss
里的大部分 特性,加快开发小程序整体的效率。
从本质上来看,它是一个转义器。它负责把
tailwindcss
中,所采集到的类名,以及生成的结果,转化成小程序中可以接受的方式。
现在,就让我们开始使用吧!
0. 准备环境以及小程序项目
首先,你需要准备 nodejs
环境,nodejs官方下载地址
请确保你安装的 nodejs
版本 >=16.6.0
。目前低于 16
的长期维护版本(偶数版本) 都已经结束了生命周期,建议安装 nodejs
的 LTS
(目前是20) 版本,
然后,你可以使用 微信开发者工具
创建一个小程序项目, 原生 js
/ts
或者 skyline
的 js
/ts
项目皆可。
这样我们的前置准备工作就完成了!
1. 安装与配置 tailwindcss
这里我们以最基础的 小程序
js
项目为例,进行操作
0. 使用包管理器安装 tailwindcss
首先,假如你项目目录下,没有 package.json
文件, 你需要执行命令,或者手动创建一下:
运行 npm init -y
命令,快速创建一个 package.json
文件在你的项目下
然后执行:
bash
# 使用你喜欢的任意 npm / yarn / pnpm
npm install -D tailwindcss postcss
# 初始化 tailwind.config.js 文件
npx tailwindcss init
这样 tailwindcss
就被安装到你项目本地了
1. 在项目目录下创建 postcss.config.js
并注册 tailwindcss
内容如下:
js
module.exports = {
plugins: {
tailwindcss: {},
}
}
这个文件和 tailwind.config.js
平级
2. 配置 tailwind.config.js
tailwind.config.js
是 tailwindcss
的配置文件,我们可以在里面配置 tailwindcss
的各种行为。
这里给出了一份 微信小程序 通用示例,具体要根据你自己项目的目录结构进行配置
js
/** @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
使它在小程序全局生效
css
@tailwind base;
@tailwind components;
@tailwind utilities;
接下来,赶紧进入下一步,安装 weapp-tailwindcss
并运行吧!
2. 安装这个插件并运行
安装插件
在项目目录下,执行:
bash
# npm / yarn /pnpm
npm i -D weapp-tailwindcss @weapp-tailwindcss/cli
这样 weapp-tailwindcss
和 cli
工具就被安装在你的本地了
执行初始化命令
在命令行中运行
sh
npx weapp-tw init
对现有的原生小程序项目,进行 weapp-tailwindcss
的初始化
执行后,会发现主要有三个文件改动,CLI
主要做了 3
件事情:
- 创建
weapp-tw.config.js
文件,这个是@weapp-tailwindcss/cli
的配置文件 - 修改
package.json
, 添加dev
和build
开发和构建脚本, 和postinstall
脚本 - 修改
project.config.json
内容,来适配构建产物
开始运行
使用 npm run dev
进入开发模式, 此时是有热更新的,主要用于开发
使用 npm run build
进行构建
构建产物默认都在
dist
目录
然后打开微信开发者工具,直接导入这个目录,即可预览效果!
想要了解更多
当然这个解决方案,其实不止限于微信开发者工具这个平台,也可以通过配置,适配更多的平台。
假如你想了解更多,欢迎访问 weapp-tw.icebreaker.top
或在 weapp-tailwindcss/discussions 中,与我们进行讨论,发表你的建议和意见。
PR is also Welcome!