[图片] 原生小程序开发如何使用 tailwindcss 原生小程序开发如何使用 tailwindcss 前言 什么是 [代码]weapp-tailwindcss[代码] ? 0. 准备环境以及小程序项目 1. 安装与配置 [代码]tailwindcss[代码] 0. 使用包管理器安装 [代码]tailwindcss[代码] 1. 在项目目录下创建 [代码]postcss.config.js[代码] 并注册 [代码]tailwindcss[代码] 2. 配置 [代码]tailwind.config.js[代码] 3. 引入 [代码]tailwindcss[代码] 2. 安装这个插件并运行 安装插件 执行初始化命令 开始运行 想要了解更多 前言 很荣幸从 [代码]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[代码] 文件在你的项目下 然后执行: [代码]# 使用你喜欢的任意 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.js[代码] 是 [代码]tailwindcss[代码] 的配置文件，我们可以在里面配置 [代码]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-tailwindcss[代码] 和 [代码]cli[代码] 工具就被安装在你的本地了 执行初始化命令 在命令行中运行 [代码]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!