Taro vite

提示

主线接入文档已合并到 Taro。本页保留给旧链接和 Tailwind CSS 4 专项排障。

危险

Taro Vite 目前不稳定，已知 bug 较多，而且依赖链版本较老，不推荐在新项目里使用。

如果没有强依赖，优先选择 Taro Webpack、uni-app、weapp-vite 等更稳定的方案。

安装

npm

npm install -D tailwindcss weapp-tailwindcss

Yarn

yarn add --dev tailwindcss weapp-tailwindcss

pnpm

pnpm add -D tailwindcss weapp-tailwindcss

Bun

bun add --dev tailwindcss weapp-tailwindcss

Taro Vite 里 Tailwind CSS 生成由 weapp-tailwindcss 接管，不需要再额外注册 @tailwindcss/vite 或 @tailwindcss/postcss。

配置

config/index.ts

import { WeappTailwindcss } from 'weapp-tailwindcss/vite'

{
  compiler: {
    type: 'vite',
    vitePlugins: [
      WeappTailwindcss({
        rem2rpx: true,
        tailwindcssBasedir: process.cwd(),
      }),
    ]
  },
}

常规 Taro Vite 项目会自动识别被引入的 src/app.css，可以不写 cssEntries。 这里说的是 Tailwind CSS 4：cssEntries 请指向纯 .css 文件，不要指向 scss / less / sass。业务 Sass/Less 可以继续用，但 Tailwind 4 的 @import "tailwindcss" 入口建议单独放在 CSS 文件里。

入口没有被引入、多入口、自动识别失败时，再补这一项：

import path from 'node:path'

WeappTailwindcss({
  rem2rpx: true,
  tailwindcssBasedir: process.cwd(),
  cssEntries: [
    path.resolve(__dirname, '../src/app.css'),
  ],
})

添加样式

在项目目录下的 src/app.css 中，添加以下内容：

src/app.css

@import "tailwindcss" source(none);
@source "../src";

Taro Vite 场景同样使用 Tailwind CSS 4 的 CSS-first 入口。小程序目标 CSS 由 WeappTailwindcss 输出，不需要把官方 Tailwind Vite 或 PostCSS 插件加入构建。

这里默认 Tailwind 入口在 src/app.css。@source "../src"; 会扫描整个源码目录，页面、组件和你自己新增的业务目录都能覆盖到。

更改好配置之后，直接运行启动项目，微信开发者工具导入这个项目，即可看到效果。

再强调一次：这页内容更适合作为历史接入说明与排障参考，不建议把 Taro Vite 作为新的默认技术选型。

参考模板

https://github.com/icebreaker-template/taro-vite-tailwindcss-v4