当前位置：首页 > news >正文

原生微信小程序使用原子化tailwindcss

news 2025/7/13 15:39:10

这里使用了第三方库来实现：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 的长期维护版本(偶数版本) 都已经结束了生命周期，建议安装 nodejs 的 LTS 版本，详见 nodejs/release。

假如你安装的 nodejs 太新，可能会出现安装包不兼容的问题，这时候可以执行安装命令时，使用 --ignore-engines 参数进行 nodejs 版本的忽略。

创建项目

打开微信开发者工具, 点击 + 创建一个项目，依次选择:

AppID 使用测试号
开发模式: 小程序
后端服务: 不使用云服务
模板选择: 第二项选择 基础
选择 JS 基础模板

使用 JS 基础模板创建的项目，依然可以使用 Typescript

首先安装本插件前，我们需要把 tailwindcss 对应的环境和配置安装好。

0. 初始化 `package.json`

首先，假如你使用原生的 JS 模板创建的项目。

在创建的项目目录下，是没有 package.json 文件 (原生的 TS 模板有这个文件), 你需要执行命令:

npm init -y，快速创建一个 package.json 文件在你的项目下