在移动端使用 Tailwind CSS （uniapp）

目录

总览

Why weapp-tailwindcss?

1. 安装

2. 配置 vite.config.ts 

3. 添加样式

总览

简介 | weapp-tailwindcss 把tailwindcss带给小程序开发者们

由于小程序运行时，本身有自己的一套 独特的 技术规范标准。这导致你无法使用 web 开发中的很多的特性，

你也无法 直接 使用像 tailwindcss 这种原子化 css 生成器来提升你的开发效率。

而 weapp-tailwindcss 就能让你，在小程序开发中使用 tailwindcss 大部分 特性。

它支持目前上所有使用 webpack 和 vite 的主流多端小程序框架和使用 webpack / gulp 的原生小程序打包方式。

你可以很容易在各个框架，或原生开发中集成 tailwindcss。

现在，就让我们开始使用吧！

从本质上讲，它是一个字符串转义器。它负责把 tailwindcss 中，所采集的类名，以及生成的结果，转化成小程序中可以接受的方式。

Why weapp-tailwindcss?

• ✅ 自动处理所有文件：以微信小程序为例，不但可以处理和转义 wxml / wxss，还能处理 js 和 wxs 产物
• ✅ 支持最原生的小程序开发，也支持许多框架如 taro , uni-app , mpx , rax 等等..
• ✅ 提供多种使用方式，方便项目集成：包括 webpack / vite / gulp 插件和直接的 nodejs api
• ✅ 生态好，解决方案丰富，提供大量现成模板，可以利用许多 tailwindcss 现有的生态来构建小程序。
• ✅ 高效的解析和缓存机制，热更新响应时间快
• ✅ 贴合 tailwindcss 的设计思路，智能提示友好

1. 安装

pnpm add -D tailwindcss @tailwindcss/postcss weapp-tailwindcss

然后把下列脚本，添加进你的 package.json 的 scripts 字段里:

 "scripts": {
   "postinstall": "weapp-tw patch"
 }

这是为了给 tailwindcss@4 打上支持 rpx 单位的补丁，否则它会把 rpx 认为是一种颜色

2. 配置 vite.config.ts 

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
import tailwindcss from '@tailwindcss/postcss'

export default defineConfig({
  plugins: [
    uni(),
    UnifiedViteWeappTailwindcssPlugin(
      {
        rem2rpx: true,
      }
    )
  ],
  css: {
    postcss: {
      plugins: [
        tailwindcss()
      ]
    }
  }
});

3. 添加样式

单独创建一个 main.css 文件，并引入 weapp-tailwindcss/css。

这是为了 IDE 智能提示, 目前 Vscode tailwindcss 插件不会扫描 vue 文件里引入的样式。

@import "weapp-tailwindcss/css";
@source not "dist";

在项目目录下的 App.vue 中，添加以下内容：

<style src="./main.css"></style>

接着直接运行 npm run dev:mp-weixin，

微信开发者工具导入这个项目，即可看到效果