taro+vue3+vite项目 tailwind 踩坑记，附修复后的模板源码地址

用户23971282248702025-08-28 14:58

tailwind 踩坑记

这，是taro官网地址：taro引入tailwind的教程

我完全按照上面的步骤来，结果根本无效（文档太过时了）

我后来又按照 weapp-tailwindcss 的官方文档做了一番修正： weapp-tailwindcss Taro (所有框架)

结果还是报错

最后的解决方案：先

js 复制代码

npm install @tailwindcss/postcss

再把 /config/index 里的

js 复制代码

import tailwindcss from "tailwindcss";

改为

js 复制代码

import tailwindcss from "@tailwindcss/postcss";

最后终于能用了，最后附上我的版本信息和附修复后的模板源码地址，下载下来后可以直接使用：

js 复制代码

> taro info
� Taro v4.1.5


  Taro CLI 4.1.5 environment info:
    System:
      OS: Windows 11 10.0.26100
    Binaries:
      Node: 22.17.1 - C:\nvm4w\nodejs\node.EXE
      npm: 10.9.2 - C:\nvm4w\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: 4.1.5 => 4.1.5
      @tarojs/components: 4.1.5 => 4.1.5
      @tarojs/helper: 4.1.5 => 4.1.5
      @tarojs/plugin-framework-vue3: 4.1.5 => 4.1.5
      @tarojs/plugin-html: 4.1.5 => 4.1.5
      @tarojs/plugin-platform-alipay: 4.1.5 => 4.1.5
      @tarojs/plugin-platform-h5: 4.1.5 => 4.1.5
      @tarojs/plugin-platform-jd: 4.1.5 => 4.1.5
      @tarojs/plugin-platform-qq: 4.1.5 => 4.1.5
      @tarojs/plugin-platform-swan: 4.1.5 => 4.1.5
      @tarojs/plugin-platform-tt: 4.1.5 => 4.1.5
      @tarojs/plugin-platform-weapp: 4.1.5 => 4.1.5
      @tarojs/runtime: 4.1.5 => 4.1.5
      @tarojs/shared: 4.1.5 => 4.1.5
      @tarojs/taro: 4.1.5 => 4.1.5
      @tarojs/vite-runner: 4.1.5 => 4.1.5
      babel-preset-taro: 4.1.5 => 4.1.5
      eslint-config-taro: 4.1.5 => 4.1.5

修复后终于可用的的模板源码地址：taro+vue3+vite+tailwind+pinia