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

发布于:2025-08-29 ⋅ 阅读:(23) ⋅ 点赞:(0)

tailwind 踩坑记

这,是taro官网地址:taro引入tailwind的教程

我完全按照上面的步骤来,结果根本无效(文档太过时了)


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

结果还是报错


最后的解决方案:

npm install @tailwindcss/postcss

再把 /config/index 里的

import tailwindcss from "tailwindcss";

改为

import tailwindcss from "@tailwindcss/postcss";

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

> 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


网站公告

今日签到

点亮在社区的每一天
去签到