跳到主要内容

1. 安装与配置 Tailwind CSS

前言​

本教程演示原生微信小程序 JS 模板接入 weapp-tailwindcss 的方式。Tailwind CSS 3 和 4 都可以用，重点是两件事：源码要进入 Tailwind 扫描范围，小程序目标转译交给 weapp-tailwindcss。

运行环境​

推荐使用 Node.js ^20.19.0 || >=22.12.0。这是当前仓库的 engines 要求，也能避开旧 Node 对现代工具链的兼容问题。Node 版本不满足时，不建议用 --ignore-engines 硬装，后续构建错误会更难排查。

创建项目​

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

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

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

先把 Tailwind CSS 的入口准备好，下一页再注册 weapp-tailwindcss 和 weapp-vite。

0. 初始化 package.json​

如果使用原生 JS 模板创建项目，项目目录里通常没有 package.json。

这时需要先执行：

npm init -y，在项目下创建 package.json。

1. 选择并安装 Tailwind CSS​

Tailwind CSS 3.x：

# 安装 tailwindcss@3 和 weapp-tailwindcss
npm i -D tailwindcss@3 weapp-tailwindcss
# 初始化 tailwind.config.js 文件
npx tailwindcss init

Tailwind CSS 4.x：

# 安装 tailwindcss 和 weapp-tailwindcss
npm i -D tailwindcss weapp-tailwindcss

weapp-tailwindcss 会接管 Tailwind CSS 生成，不要再创建 Tailwind 专用的 postcss.config.js。如果项目已有 PostCSS 配置，只保留业务自己的非 Tailwind 插件。

2. 配置扫描范围​

Tailwind CSS 3.x​

tailwind.config.js 是 Tailwind CSS 3 的配置文件。原生小程序项目里，最重要的是把会写类名的 wxml/js/ts 文件加入 content：

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // 添加你需要提取的文件目录
    'components/**/*.{wxml,js,ts}',
    'pages/**/*.{wxml,js,ts}',
    // 不要使用下方的写法，这会导致 vite 开发时监听文件数量爆炸
    // '**/*.{js,ts,wxml}', '!node_modules/**', '!dist/**'
  ],
  // 使用 ts 模板时，可以使用下方配置
  // content: ['miniprogram/**/*.{ts,js,wxml}'],
  corePlugins: {
    // 小程序不需要 preflight 和 container；多端项目可以按环境变量分别控制
    preflight: false,
    container: false,
  }
}

Tailwind CSS 4.x​

Tailwind CSS 4 在 CSS 入口里写扫描范围：

app.css
@import "tailwindcss";
@source "./components/**/*.{wxml,js,ts}";
@source "./pages/**/*.{wxml,js,ts}";
@source "./app.{js,ts,json}";
@source not "./node_modules";
@source not "./dist";

Tailwind 4 的入口请放在纯 .css 文件里。不要直接写进 less、scss、sass 入口。

3. 引入 Tailwind CSS​

在小程序项目入口样式文件中写 Tailwind 入口。Tailwind CSS 3.x 使用：

app.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind CSS 4.x 使用上方的 @import "tailwindcss"; 和 @source。

在入口 CSS 加入这一段代码后，微信开发者工具可能会先报错。这通常是因为 weapp-tailwindcss 插件还没有注册完成。

下一步继续安装并注册 weapp-tailwindcss。

SPONSORED
Easysearch
企业级的分布式搜索型数据库