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 path from 'node:path'
import { WeappTailwindcss } from 'weapp-tailwindcss/vite'

const projectRoot = path.resolve(__dirname, '..')

{
  compiler: {
    type: 'vite',
    vitePlugins: [
      WeappTailwindcss({
        cssOptions: {
          rem2rpx: true,
        },
        tailwindcssBasedir: projectRoot,
        cssEntries: [
          path.resolve(projectRoot, 'src/app.css'),
        ],
      }),
    ]
  },
}

Tailwind CSS 4 项目应显式配置 cssEntries，并使用项目根目录解析出的绝对路径指向纯 .css 入口。 这里说的是 Tailwind CSS 4：cssEntries 请指向纯 .css 文件，不要指向 scss / less / sass。业务 Sass/Less 可以继续用，但 Tailwind 4 的 @import "tailwindcss" 入口建议单独放在 CSS 文件里。

cssEntries 只负责让 WeappTailwindcss 稳定读取 Tailwind CSS 入口，入口 CSS 仍然要通过 Taro 入口实际引入。多入口或分包入口请都写进数组：

import path from 'node:path'

const projectRoot = path.resolve(__dirname, '..')

WeappTailwindcss({
  cssOptions: {
    rem2rpx: true,
  },
  tailwindcssBasedir: projectRoot,
  cssEntries: [
    path.resolve(projectRoot, '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