4.2.0 🚀
[email protected] 现已适配 uni-app x 的多端构建能力，让 Tailwind CSS 原子类能够无缝跨端使用。本文梳理了从项目初始化到插件配置的完整流程，帮助你快速完成集成与发布。
前言
uni-app x 是 DCloud 团队开发的跨平台编译方案，可将同一份代码编译到 Web、小程序、Android、iOS、鸿蒙等多端。
最近，我很荣幸在 [email protected] 版本中，适配了 uni-app x 的多端构建，使 Tailwind CSS 的原子化样式能够无缝应用于多端项目。
所以就有了这篇文章，给大家介绍(秀)一下怎么在 uni-app x 项目中，集成 weapp-tailwindcss 这个样式解决方案。
快速集成
0. 创建项目
使用最新版本 Hbuilderx 创建一个 uni-app x 项目，然后在项目根目录执行
npm init -y
初始化一个 package.json 文件 (当然你也可以手动创建)
1. 安装并引入 Tailwind CSS
这篇发布日志中的 Tailwind CSS 3 接入示例已经迁移到旧版文档。当前站点只保留 Tailwind CSS 4 接入说明；如果项目必须继续使用 tailwindcss@3，请安装 weapp-tailwindcss@4 并查看 v4 文档站。
2. 安装 weapp-tailwindcss
在项目目录下，执行:
npm i -D tailwindcss weapp-tailwindcss
当前接入方式已经合并到 快速使用。不再需要配置 postinstall: "weapp-tw patch"。
3. uni-app x 中注册 weapp-tailwindcss
3.0. 配置 Tailwind CSS 入口
在项目根目录创建 main.css：
@import "tailwindcss" source(none);
@source "./App.uvue";
@source "./pages/**/*.{uts,uvue}";
@source "./components/**/*.{uts,uvue}";
@source "./stores/**/*.{uts,uvue}";
@source not "./uni_modules/**/*";
@source not "./unpackage/**/*";
3.1. 配置 Vite
创建 vite.config.ts 文件，注册插件：
这里特别注意
uniAppX是从weapp-tailwindcss/presets这个预设中导出的
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import { WeappTailwindcss } from 'weapp-tailwindcss/vite'
import { uniAppX } from 'weapp-tailwindcss/presets'
export default defineConfig({
plugins: [
uni(),
WeappTailwindcss(
uniAppX({
base: __dirname,
cssEntries: [
new URL('./main.css', import.meta.url).pathname,
],
rem2rpx: true,
}),
),
],
});
3.2. 更改 tailwindcss 配置
当前 Tailwind CSS 4 配置请查看 uni-app x 接入文档。旧版 Tailwind CSS 3 配置请查看 v4 文档站。
在完成这些步骤之后， uni-app x 就集成 tailwindcss 原子化样式解决方案。
如何运行
目前 uni-app x 并没有提供任何 cli 的方式去使用它，所以目前我们使用 Hbuilderx 去进行开发和构建的。
这里可以使用 Hbuilderx 的运行，来运行到各个平台。
优先使用安卓进行开发
一般来说，CSS 平台的兼容程度，是 Web > 小程序 > App(安卓/IOS/鸿蒙)
所以，假如你有跨多端的需求，建议你一开始使用 安卓模拟器 来进行开发和调试，这是综合考虑下来 成本最低 的方案。
🧐为什么?
因为 uni-app x 开发原生 app 是有一些限制的，
-
比如文字必须包括在
<text>标签中，文字的样式(比如text-2xl text-center text-red-400) 也必须设置在这个元素上，设置在<view>上是没有效果的。而Web和小程序都是兼容的。 -
还有很多
css的样式，目前uni-app x暂时是不兼容的，强行使用Hbuilderx的控制台会爆出警告，要求你进行更改。
这就相当于，你写的代码，能够满足了 安卓 这一端，那就大概率能满足 小程序 端，甚至 Web 端了(当然实战中还需要很多条件编译处理)
🧐为什么不是 IOS 或者鸿蒙?
IOS 模拟器，需要你有 Mac 才能运行，IOS 调试需要你有苹果手机，考虑到大部分开发应该都是用的 Windows 机器，所以选择 Android 模拟器开发，相对成本低一些，你都有的话当我没说
至于鸿蒙，uni-app x 官方文档上都写着:
鸿蒙整体处于发展初期，能用，有坑，大部分坑有规避方案。但开发者应建议其领导、客户、质量部门降低期望，不能严格比照Android和iOS的验收标准要求鸿蒙。
不如安卓/IOS 稳定的话，自然优先选择安卓平台
常见问题
Vscode uvue/uts 代码染色
安装 DCloud 自己推出的 uni-app x语言服务, 插件市场一搜 uni-app x 就搜到了
- ID: dcloud-ide.hbuilderx-language-services
- 说明: 支持uni-app x项目的代码提示、悬浮、转到定义、查找引用、大纲、校验等
- 发布者: DCloud
- VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=dcloud-ide.hbuilderx-language-services
Tailwindcss 智能提示
目前 Tailwindcss 智能提示最好的还是 vscode，但是 vscode Tailwindcss 肯定是不认识 uvue/uts 文件的，
要让插件认识，只需要在你的项目中添加 .vscode/settings.json 文件
{
"tailwindCSS.includeLanguages": {
"uvue": "html",
"uts": "javascript"
}
}
当然，你直接全局修改你的 vscode Tailwindcss 插件配置肯定也是可以的。
尾言
uni-app x 是一个 庞大的工程, DCloud 团队能做出这样的技术解决方案，令人倾佩。
假如你遇到什么问题，可以在 weapp-tailwindcss 的 issue/disscussions 中提出。
配置好的模板
https://github.com/icebreaker-template/uni-app-x-hbuilderx
使用方式见这个项目中的 README.md
