chore(deps): upgrade

Author: sonofmagic

website/blog/2025/8/v4.2-release.mdx

@@ -0,0 +1,218 @@
+# weapp-tailwindcss 已支持 uni-app x 多端构建
+
+## 前言
+
+[`uni-app x`](https://doc.dcloud.net.cn/uni-app-x/) 是一个非常强大的跨多端解决方案，可以说是国内跨平台编译技术的天花板了。
+
+最近，我很荣幸在 `weapp-tailwindcss@4.2.x` 版本中，适配了 `uni-app x` 的多端构建。
+
+并借助 `uni-app x` 的能力，把 `tailwindcss` 原子化样式方案，同时带入到 `Web`,`小程序`, `安卓`,`IOS`, `鸿蒙` 等多端开发中!
+
+## 如何使用
+
+### 0. 创建项目
+
+使用最新版本 `Hbuilderx` 创建一个 `uni-app x` 项目，然后执行
+
+```bash npm2yarn
+npm init -y
+```
+
+初始化一个 `package.json` 文件 (当然你也可以手动创建)
+
+### 1. [安装并引入 tailwindcss3](/docs/quick-start/install)
+
+
+```bash npm2yarn
+# 安装 tailwindcss@3 版本的依赖
+npm i -D tailwindcss@3 postcss autoprefixer
+```
+
+```bash npm2yarn
+# 初始化一个 tailwind.config.js 文件
+npx tailwindcss init
+```
+
+然后，在你的根目录中的 `App.uvue` 中引入 `tailwindcss` 使它在应用全局生效
+
+```html title="App.uvue"
+<style>
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+</style>
+```
+
+### 2. [安装 weapp-tailwindcss](/docs/quick-start/this-plugin)
+
+在项目目录下，执行:
+
+```bash npm2yarn
+npm i -D weapp-tailwindcss
+```
+
+然后把下列脚本，添加进你的 `package.json` 的 `scripts` 字段里:
+
+```json title="package.json"
+ "scripts": {
+    // highlight-next-line
+   "postinstall": "weapp-tw patch"
+ }
+```
+
+想知道原因的同学可以查看 [**这个链接**](https://tw.icebreaker.top/docs/quick-start/this-plugin)
+
+### 3. [uni-app-x 注册 weapp-tailwindcss](/docs/quick-start/frameworks/uni-app-x)
+
+#### 0. 创建工具类
+
+在项目中创建 `shared.js` 文件，用于存放一些工具函数：
+
+```js title="shared.js"
+const path = require('node:path')
+
+function r(...args) {
+  return path.resolve(__dirname, ...args)
+}
+
+module.exports = {
+  r,
+}
+```
+
+#### 1. 注册插件
+
+创建 `vite.config.ts` 文件，注册插件：
+
+> 这里特别注意 `uniAppX` 是从 `weapp-tailwindcss/presets` 这个预设中导出的
+
+```js title="vite.config.ts"
+import { defineConfig } from 'vite';
+import uni from '@dcloudio/vite-plugin-uni';
+import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
+import { r } from './shared'
+import { uniAppX } from 'weapp-tailwindcss/presets'
+import tailwindcss from 'tailwindcss'
+
+export default defineConfig({
+    plugins: [
+        uni(),
+        UnifiedViteWeappTailwindcssPlugin(
+            uniAppX({
+                base: __dirname,
+                rem2rpx: true,
+            }),
+        ),
+    ],
+    css: {
+        postcss: {
+            plugins: [
+                tailwindcss({
+                    config: r('./tailwind.config.js'),
+                }),
+            ]
+        }
+    }
+});
+```
+
+#### 2. 更改 tailwindcss 配置
+
+使用绝对路径，包括所有的提取文件
+
+```js title="tailwind.config.js"
+const { r } = require('./shared')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    r('./pages/**/*.{uts,uvue}'),
+    r('./components/**/*.{uts,uvue}') 
+  ],
+  corePlugins: {
+    preflight: false,
+  },
+}
+
+```
+
+假如你需要从更多的目录中提取 `CSS Token`，你需要添加更多的 `glob` 表达式在 `content` 配置中。
+
+---
+
+在完成这 3 步之后， `uni-app x` 就集成 `tailwindcss` 原子化样式解决方案。
+
+## 如何开发
+
+目前 `uni-app x` 并没有提供任何 `cli` 的方式去使用它，所以目前我们使用 `Hbuilderx` 去进行开发和构建的。
+
+这里可以使用 `Hbuilderx` 的运行，来运行到各个平台。
+
+### 优先使用安卓进行开发
+
+一般来说，`CSS` 平台的兼容程度，是 `Web` > `小程序` > `App`(安卓/IOS/鸿蒙)
+
+所以，假如你有跨多端的需求，建议你一开始使用 `安卓模拟器` 来进行开发和调试，这是综合考虑下来 **成本最低** 的方案。
+
+#### 🧐为什么?
+
+因为 `uni-app x` 开发原生 `app` 是有一些限制的，
+
+1. 比如文字必须包括在 `<text>` 标签中，文字的样式(比如 `text-2xl text-center text-red-400`) 也必须设置在这个元素上，设置在 `<view>` 上是没有效果的。而 `Web` 和 `小程序` 都是兼容的。
+
+2. 还有很多 `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` 文件
+
+```json
+{
+    "tailwindCSS.includeLanguages": {
+        "uvue": "html",
+        "uts": "javascript"
+    }
+}
+```
+
+当然，你直接全局修改你的 `vscode Tailwindcss` 插件配置肯定也是可以的。
+
+## 配置好的模板
+
+https://github.com/icebreaker-template/uni-app-x-hbuilderx
+
+使用方式见这个项目中的 `README.md`
+
+## 结尾
+
+## 参考文档
+
+[uni-app x 官方文档](https://doc.dcloud.net.cn/uni-app-x/)
+
+[weapp-tailwindcss官网](https://tw.icebreaker.top/)
+
+[weapp-tailwindcss 的 uni-app x 专题](https://tw.icebreaker.top/docs/uni-app-x)