「问题记录｜Taro｜tailwind｜微信小程序」使用Taro和tailwind css开发微信小程序app.wxss编译报错

最新推荐文章于 2025-04-03 09:23:04 发布
最新推荐文章于 2025-04-03 09:23:04 发布
阅读量874 收藏 9
点赞数 5
文章标签： taro 微信小程序 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41785288/article/details/145022211
版权

本文主要记录使用Taro框架开发微信小程序时，使用了Tailwind css作为样式框架，初始化tailwind css配置后小程序编译app.wxss报错问题的原因以及解决方法

文章目录

背景说明

在开发微信小程序的时候选择了Taro作为开发框架，使用tailwind css来编写样式。按照Taro和tailwind css的文档给项目配置好tailwind之后，发现编译成微信小程序无法通
过微信开发者工具的编译。各个配置文件内容如下，供参考：

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 这里给出了一份 uni-app /taro 通用示例，具体要根据你自己项目的目录结构进行配置
  // 不在 content 包括的文件内，你编写的 class，是不会生成对应的css工具类的
  content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
  // 其他配置项
  // ...
  corePlugins: {
    // 小程序不需要 preflight，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
    preflight: false
  }
}

app.css / app.scss

@tailwind base; */
@tailwind components;
@tailwind utilities;

编译得到的app.wxss报错部分内容

/*!***********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./src/app.css ***!
  \***********************************************************************************************************************************************************************************/
*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0rpx;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}
::-webkit-backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0rpx;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}
::-ms-backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0rpx;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}
::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0rpx;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}

报错信息

[ WXSS 文件编译错误] 
./app.wxss(4:1): unexpected token `*`(env: macOS,mp,1.06.2412040; lib: 3.7.4)

问题原因

根据报错信息可以知道微信开发者工具报错在通配符*，而这一部分的内容是@tailwind base;产生的，所以要消除编译报错就需要改掉@tailwind base;来移除打包之后app.wxss中的*通配符。

解决方法

将项目中的app.css或者app.scss修改成如下内容即可：

/* @tailwind base; */
@tailwind components;
@tailwind utilities;

page {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

view, text, scroll-view {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

写文不易，如果对你有帮助的话，来一波点赞、收藏、关注吧~👇

原生微信小程序使用原子化tailwindcss
weixin_68658847的博客
12-08 1708
原生微信小程序使用原子化tailwindcss
taro开发工具安装_taro使用教程（详细版）
weixin_39789399的博客
12-22 4465
Taro框架的简介和开篇介绍Taro是由京东凹凸实验室推出的框架，目的就是解决多端混乱的局面，也是当下比较新兴的一个框架。当我们按照一种模式一种代码进行开发，开发完成后，项目就有了在任何终端显示的能力，这是一种想想都很爽的。那具体Taro有那些优点，请看下面的图片。目前Taro支持的终端微信小程序H5 移动端Web页面百度小程序支付宝小程序快应用ReactNative字节跳动小程序QQ轻应用是目前...
这可能是小程序使用 tailwindcss 开发的最佳方案
ice breaker's blog
03-28 1141
remrpx笔者对的理解还算比较到位，也写了不少的presetplugin和许多的postcss插件。最近这个月，我发布了的2.x版本，与之前的版本相比，大大增强了我们开发者的开发体验，尤其是类jsx框架相关的体验。接下来，让我们快速开始吧！
taro-plugin-tailwind：小程序与H5的 TailwindCSS 一站式解决方案
最新发布
gitblog_00850的博客
04-03 978
taro-plugin-tailwind：小程序与H5的 TailwindCSS 一站式解决方案 taro-plugin-tailwind Taro 接入 tailwindcss 插件 项目地址: https://gitcode....
微信小程序中使用TailwindCSS的指南
gitblog_00883的博客
08-10 1223
微信小程序中使用TailwindCSS的指南 weapp-tailwindcssbring tailwindcss to weapp ! 把 `tailwindcss` 原子化思想带入小程序开发吧 ! 原 `weapp-tailwindcss-webpack-plugin`项目地址:https://gitcode.com/gh_mirrors/we/weapp-tailwindcss 1. 项目...
uniapp微信小程序安装tailwindcss编译失败的解决思路
ChauncyWu的博客
07-24 3383
uniapp微信小程序安装tailwindcss编译失败的解决思路
Taro安装tailwindcss的异常报错
a1308003218的博客
07-30 1609
按照官方流程一步一步操作下来，会报错。如果你选的是Vite会出现下面报错 taro Error: Cannot find module 'webpack'， 然后继续运行，依然报错 UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block ModuleBuildError: Module build failed
taro+react+ts+tailwind微信小程序兼容h5API、组件兼容问题
G19174152396的博客
02-21 779
Taro+react+ts+tailwind开发微信小程序和h5样式、API、组件兼容踩坑
婴幼儿普通话英语启蒙【嘟嘟早教卡】微信小程序源码
在实现上，需要结合Taro框架进行多端适配的前端开发，利用Tailwind CSS实现简洁的界面设计，同时使用Laravel框架搭建后台管理系统来处理用户数据和统计分析等功能。 7. 音频和图片素材处理 在开发涉及多媒体内容的...
taro v4如何使用tailwindcss
03-04
新建或编辑现有的全局样式文件（如 `app.wxss`），加入如下代码片段以便于在整个应用程序范围内启用 TailwindCSS 功能： ```scss /* app.wxss */ @import 'tailwindcss/base'; @import 'tailwindcss/components'; @...
微信小程序资源开发汇总
gu13021462123的博客
06-19 1085
本文收集了微信小程序开发过程中会使用到的资料、问题以及第三方组件库。本文不是一篇关于如何学习微信小程序的入门指南，也非参考手册，只是一些资料的整理。本仓库中的资料整理自网络，也有一些来自网友的推荐：如果对你有帮助的话麻烦大家支持一下。
taro-plugin-tailwind:Taro接收tailwindcss插件
03-15
芋头插件尾风 Taro接收 tailwindcss （2.0）插件，支持小程序/ H5，React Native暂未测试。 安装 在Tar​​o项目根目录下安装 $ npm i taro-plugin-tailwind --save-dev $ # 或使用 yarn $ yarn add -D taro-plugin-tailwind 使用 约会插件 请确保Taro CLI已升级到Taro 3的最新版本，确保taro-plugin-tailwind版本在v1.1.0及以上。 修改项目config/index.js中的plugins配置如下： const config = { /// ... plugins : [ // ...其余插件 'taro-plugin-tailwind' , ] , /// ... ///
学习-tailwindcss-最终项目
03-04
本地设置 逐步将它们放在一起（假定已安装Node.js）： •将文件夹转换为Node.js应用程序/项目/工作区： learn-tailwindcss % npm init ：创建package.json •安装Tailwindcss： learn-tailwindcss % npm install postcss learn-tailwindcss % npm install postcss-cli learn-tailwindcss % npm install tailwindcss learn-tailwindcss % npm install autoprefixer •或一次运行： learn-tailwindcss % npm install postcss postcss-cli tailwindcss autoprefixer •注意： ：如果在旧版本上安装，则Po
在小程序中愉快的使用 Tailwind CSS 吧
ice breaker's blog
05-16 1634
在小程序中愉快的使用 Tailwind CSS 吧 把 tailwindcss JIT 思想带入小程序开发吧 在小程序中愉快的使用 Tailwind CSS 吧 Usage uni-app (vue2/3) uni-app for vite (vue3) Taro v3 (React/vue2/3) remax (react) rax (react) 原生小程序(webpack5 mina) Options 配置项 使用 arbitrary values Q&A 1. 我在 js .
小程序css插件,tailwindcss 支持微信小程序配置
weixin_29356805的博客
08-03 1211
安装postcss插件npm install -D postcss-class-rename css-byebyepostcss-class-rename 是将小程序不支持的css类重命名css-byebye 移除不支持的css类，比如：* {}tailwindcss配置移除不支持的css样式module.exports = {// Tree-shake unused styles in prod...
Taro 写个微信小程序遇到的问题
hnnsboy的博客
03-09 485
测试了很多的 UI 方案，包括 VantWeapp，NutUI(安装报错，目前跟 Taro4.0.9 不适配, yarn add taro-ui@next)，ColorUI(只适用于 UniApp 和原生微信小程序), Taro UI(官网维护很差，找不到文档)，"requireConfigFile": false, // 关键配置：禁用 Babel 配置文件检查。configFile: './babel.config.js' // 指向你的 Babel 配置文件。taroify(有警告，但是至少能用)
Fix bug | Taro+React 微信小程序引入tailwind
Hizeros的博客
09-11 587
Fix [ WXSS 文件编译错误] ./app.wxss(129:7): unexpected `\` at pos 4972(env: Windows,mp,1.06.2407110; lib: 3.5.6)
[WXSS 文件编译错误] ./pages/.wxss unexpected token “*“
weixin_45441153的博客
09-20 9723
问题如上图：最开始以为是m1芯片的问题，后来发现不是。 解决方案：将*换成view，能满足大部分情况
项目中万能使用tailwindcss，无版本冲突、报错
xxx
08-02 1081
新建两个css文件tailwindInput.css、tailwindOutput.css。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

明仔的阳光午后

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值