原生小程序开发如何使用 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!