记一次Taro v4集成tailwindcss踩坑

Dragon Wu2026-02-25 8:20

一、问题描述

我最开始尝试集成 Tailwind CSS v4，但未能成功。查阅相关资料后发现，现有方案大多基于 Tailwind CSS v3，于是我改用 v3 版本完成了集成。

按照官方文档的此方法集成：https://v3.tailwindcss.com/docs/installation/using-postcss

运行项目发现报错如下：

$WXSS 文件编译错误$ ./app.wxss unexpected token "*" 2 | !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet $1$ .rules $4$ .oneOf $0$ .use $1$ !./node_modules/postcss-loader/dist/cjs.js??ruleSet $1$ .rules $4$ .oneOf $0$ .use $2$ !./src/styles/global.css ***! 3 | \*********************************************************************************************************************************************************************************************/ > 4 | *, ::before, ::after { | ^ 5 | --tw-border-spacing-x: 0; 6 | --tw-border-spacing-y: 0; 7 | --tw-translate-x: 0; at files://dist\app.wxss#4(env: Windows,mp,1.06.2301040; lib: 3.14.2)

二、解决方案

该问题是因为微信小程序不兼容css的伪类选择器写法。

我们只需要把global.css修改为如下即可：

html 复制代码

@tailwind components;
@tailwind utilities;

这里一定要把@tailwind base;去掉，否则伪类选择器会直接不兼容报错。

删除 @tailwind base 影响总结

类别	具体影响	是否感知 / 是否需处理
✅ 不受影响	Tailwind 所有工具类（`flex`/`mt-4`/`text-red-500` 等）	完全无感知，正常用
❌ 轻微影响	1. 丢失 HTML 标签（`h1`/`a`/`p`）默认样式重置	无感知（小程序不用这些标签）
	2. 丢失 `::before`/`::after` 伪元素默认变量	无感知（小程序不支持伪元素）
	3. 无默认字体 / 行高预设	可忽略（按需用类名覆盖）

核心结论

唯一要注意：无默认全局样式重置（仅影响视觉，不影响功能）；
无任何功能性问题，Tailwind 核心用法完全正常；
无需额外处理，若觉样式乱，补几行 view/text 基础样式即可（非必需）。