uni-app 开发笔记：集成 Tailwind CSS 的过程

天黑天明都似梦
8 阅读1分钟

最近在做一个 uni-app 商城小程序，尝试引入 Tailwind CSS，记录一下配置过程和使用感受。

背景

项目是一个标准的电商小程序：首页、商品列表、购物车、个人中心。之前写样式用的是 SCSS，每个页面都有对应的样式文件。

开发过程中遇到一些问题：

  • 类名命名需要反复斟酌，同一个组件不同人写可能叫不同的名字
  • 样式文件和组件文件分离，修改时需要来回切换
  • 一些通用样式（间距、颜色、圆角）经常重复定义

之前做 Web 项目用过 Tailwind CSS，体验还不错。想看看小程序里能不能用，搜了一下找到了 weapp-tailwindcss 这个方案。

配置过程

1. 安装依赖

pnpm add -D tailwindcss@3 postcss autoprefixer weapp-tailwindcss
npx tailwindcss init

2. 配置 tailwind.config.js

module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx,vue}'],
  corePlugins: { preflight: false }
}

3. 配置 vite.config.ts

import { UnifiedViteWeappTailwindcssPlugin as uvwt } from 'weapp-tailwindcss/vite'

export default defineConfig({
  plugins: [uni(), uvwt()],
  css: {
    postcss: { plugins: [require('tailwindcss'), require('autoprefixer')] }
  }
})

4. App.vue 引入样式

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

5. 添加 postinstall 脚本

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

使用对比

使用任意值语法 [] 直接写 rpx，无需预配置。

遇到的问题

1. 动态 class 不生效

动态拼接的类名在生产环境会被 tree-shake 掉，需要使用完整类名。

2. 部分小程序组件样式限制

button、input 等原生组件有默认样式，需要用组件提供的特定属性覆盖。

优点

  • 样式和结构写在一起，修改时不用切换文件
  • 原子类有统一的命名规范，团队协作时风格一致
  • 配置好后基本可用，不需要额外维护样式文件

注意点

  • 需要熟悉 Tailwind 的类名，初期可能要查文档
  • 动态 class 要注意 tree-shaking 问题

参考资源

avatar
文章
阅读
粉丝