sonofmagic / weapp-tailwindcss

bring tailwindcss to weapp ! 把 `tailwindcss` 原子化**带入小程序开发吧 ! 原 `weapp-tailwindcss-webpack-plugin`

weapp-tailwindcss

简体中文(zh-cn) | English

降低开发维护成本，提升开发效率的 小程序 tailwindcss 全方面解决方案

我的其他项目:
Tailwindcss/Unocss UI 生成提取器: IceStack 已经发布，快来用它管理你的原子化CSS 组件吧！

[国内部署的文档地址] | [备用Github Page] | [1.x文档]

• 特性
  • 插件介绍
• 安装与使用方式
• 生态和解决方案
• 常见问题
• 现成配置好的各个框架的模板
• 旧版本迁移指南
• 配置项参考
• 变更日志
• Tips
• Contribute
• License
• Star History
• Related projects
  • CLI 工具
  • weapp-pandacss

特性

不仅仅是webpack	主流框架与原生开发支持

核心插件支持 webpack/vite/gulp进行打包，涵盖了市面上几乎所有的主流开发小程序的框架。

这些插件能够自动识别并精确处理所有 tailwindcss 的工具类来适配小程序环境。同时这些插件还有对tailwindcss生成的工具类名，进行压缩和混淆的能力。这个能力可以缩短css选择器的长度，减小生成样式的体积，同时让生产环境中的类名变得不可阅读。

插件介绍

从 weapp-tailwindcss/webpack 导出的UnifiedWebpackPluginV5 是一个核心插件，所有使用 webpack5 进行打包的框架都可以使用它。

从 weapp-tailwindcss/vite 导出的UnifiedViteWeappTailwindcssPlugin 为 vite 专用插件，配置项和使用方式和 webpack 插件是一致的。

而我们的 gulp 插件方法，可以从 weapp-tailwindcss/gulp 导出。

目前，这些插件支持最新版本的 tailwindcss v3.x.x 版本和 webpack5，vite 和 gulp。

如果你还在使用 tailwindcss@2 版本，那你应该使用本插件的 1.x/webpack4 版本。另外请确保你的 nodejs 版本 >=16.6.0。目前低于 16 的长期维护版本(偶数版本) 都已经结束了生命周期，建议安装 nodejs 的 LTS版本，详见 nodejs/release

安装与使用方式

生态和解决方案

常见问题

现成配置好的各个框架的模板

旧版本迁移指南

配置项参考

变更日志

Tips

自从 2.3.3 版本开始，我发布了一个额外的包叫 weapp-tailwindcss,它和 weapp-tailwindcss-webpack-plugin 代码版本完全一致，且保持发布版本的同步。以后可以都去安装 weapp-tailwindcss 这个包，当然现在 weapp-tailwindcss-webpack-plugin 这个包也不会废弃，也会时刻保持版本的同步。

为什么要这么做的原因，主要是因为 weapp-tailwindcss-webpack-plugin 这个名字，已经不适合描述现在这种，多插件并存的状态了，为了以后的发展改个名。

前沿阅读: What’s Tailwind Oxide Engine? The Next Evolution of Tailwind CSS，未来 tailwindcss 会切换到这个引擎来大幅加快构建和运行速度，当然等它发布正式版本的时候，我也会尽可能第一时间去进行兼容新的引擎。

Contribute

我们邀请你来贡献和帮助改进 weapp-tailwindcss 💚💚💚

以下有几个方式可以参与:

• 报告错误：如果您遇到任何错误或问题，请提issue并提供完善的错误信息和复现方式。
• 建议：有增强 weapp-tailwindcss 的想法吗？请提 issue 来分享您的建议。
• 文档：如果您对文档有更好的见解或者更棒的修辞方式，欢迎 pr。
• 代码：任何人的代码都不是完美的，我们欢迎你通过 pr 给代码提供更好的质量与活力。

License

MIT

Star History

Related projects

CLI 工具

weapp-ide-cli: 一个微信开发者工具命令行，快速方便的直接启动 ide 进行登录，开发，预览，上传代码等等功能。

weapp-pandacss

weapp-pandacss CSS-in-JS 编译时框架的小程序适配器

weapp-tailwindcss's Issues

Source Map 无法正常命中问题

使用TaroWeappTailwindcssWebpackPluginV4插件后，项目中的debugger和控制台错误提示不能跳转到对应的源码文件

打开微信开发者工具热重载，修改Arbitrary values会失效

描述这个Bug
打开热重载，修改Arbitrary values会失效

如何重现
打开微信开发者工具的热重载

期望行为(可选)
期望可以正常加载生成的样式

屏幕截图(可选)

运行环境

• OS: macos 12.3.1 (21E258)
• Nodejs: v12.22.7
• Framework: uni-app

Additional context
Add any other context about the problem here.

item.listMap is not a function

描述这个Bug
运行 main 分支下 demo/taro-vue2-app 的 dev:weapp 命令报错：

代码url

可提供转化失败的 wxml,js,wxss 这类的产物，
可以直接复制粘贴在此处，或者提供 url

如何重现
Steps to reproduce the behavior:

1. cd demo/taro-vue2-app
2. 修改 config/index.js 文件
3. 执行 yarn dev:weapp
4. See error

期望行为(可选)
正常运行

屏幕截图(可选)

运行环境

• OS: window
• Nodejs: 16.15.1
• Framework: taro

Additional context
Add any other context about the problem here.

[QUESTION] 如何兼容rax

背景

• 项目正在使用rax
• 希望可以继承这个插件

是否可以提供选项取消 view 的全局 box-sizing: border-box

当我尝试在现有项目中启用这个插件时，发现编译后的显示效果不对。
原来是插件在 view 的 preflight 中使用了 box-sizing: border-box。

是否可以提供选项取消这个全局定义？

另外，这个定义只针对 view，其他元素像是 image text 等仍然默认是 box-sizing: content-box，这并不符合直觉。

目前我的解决方案是覆盖掉这个配置：

view {
  box-sizing: content-box !important;
}

适配一下这个插件吧 tailwind-children

require("tailwind-children"),

在使用这个插件的时候小程序端会报错。看能不能适配处理一下

:where(.child_c__i_h-bl_100rpx_br)>:where(:not(.not-child)){height:100rpx!important}:where(.child_c__i_w-bl_100rpx_br)>:where(:not(.not-child)){width:100rpx!important}:where(.child_c_rounded-full)>:where(:not(.not-child)){border-radius:9999px}:where(.child_c_text-bl__h_999_br)>:where(:not(.not-child)){--tw-text-opacity: 1;color:rgb(153 153 153 / var(--tw-text-opacity))}

转化小程序 class 内带有 `{{}}` 的条件class 错误， 只保留 `{}` 内的样式，其他的样式会丢失

描述这个Bug
转化小程序 class 内带有 {{}} 的条件class 错误， 只保留 {} 内的样式，其他的样式会丢失

代码实例
class="border-0 icon h-10 w-10 mx-auto {{active=='home'? 'icon-home-selected' : 'icon-home'}}"

使用uniapp demo，disabled不生效

使用uniapp demo，编译为小程序，disabled类不生效

<button class="bg-green-500 text-white disabled:opacity-50" disabled>disable</button>

正常效果

传类名给自定义组件的时候 不会重命名类名

描述这个Bug
只能手动重命名

屏幕截图(可选)

运行环境

• OS: [windows]
• Nodejs: 16x
• Framework: uni-app/vite

Additional context
Add any other context about the problem here.

在app下，text-[26rpx]这种样式不生效。text-[13px] 这种可以

在app下，text-[26rpx]这种样式不生效。text-[13px] 这种可以

自定义类名转换错误

描述这个Bug
A clear and concise description of what the bug is.

代码url

可提供转化失败的 wxml,js,wxss 这类的产物，
可以直接复制粘贴在此处，或者提供 url

如何重现
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

期望行为(可选)
A clear and concise description of what you expected to happen.

屏幕截图(可选)
If applicable, add screenshots to help explain your problem.

运行环境

• OS: [e.g. iOS]
• Nodejs: 16x
• Framework: uni-app/taro/remax/rax

Additional context
Add any other context about the problem here.

使用vant组件报错

描述这个Bug
引入vant weapp的组件会报错，错误信息如下：

 ERROR  Error: Unexpected char `/` in state `ATTRIBUTE_NAME` with action `SLASH`line:54,column:2

代码url

经过测试发现是vant组件里的steps组件中用了WXS 模块

在htmlMatcher中去掉wxcomponents就没问题了

vite+vue3在1.5.0版本下报webpack module not found

描述这个Bug

postcss.config.js 不能正常加载,uniapp官方会修复吗？

bg-[#123456]与bg-blue-500/50不生效

写bg-[#123456]与bg-blue-500/50在类名里面不生效
但这样做就生效
@apply bg-[#123456]

使用后 vscode tailwindcss 代码提示 不正确

描述这个Bug

uni-app-vue2-tailwind-vscode-template demo中

//postcss.config.js
require("postcss-rem-to-responsive-pixel/postcss7")({
rootValue: 4,
propList: [""],
transformUnit: "rpx",
}),
代码生效了 但是 tailwindcss 代码提示还是原来的
提示 4.5rem 为72px 真实 是 4.5rem为18rpx;
.text-7xl {
font-size: 4.5rem/ 72px */;
line-height: 1;
}

Taro 3.5.4 + React + h5 开发模式下会不停的编译

描述这个Bug
Taro 3.5.4 + React + h5 开发模式下会不停的编译

代码url

https://github.com/sonofmagic/taro-react-tailwind-vscode-template.git

如何重现

1. yarn dev:h5

期望行为(可选)
代码改动后才会重新编译

屏幕截图(可选)

运行环境

• OS: macOS 12.5.1
• Nodejs: 16.x
• Framework: taro

[A] 目前tailwindcss compat(v2) 和 v3 都可以愉快的使用，目前开放了2个插件都是 webpack v4 版本，必要时会开放 webpack v5 版本

编译提示 Deprecation Warning

描述这个Bug

webpack5 以后不能直接操纵 assets了，
后续要改成 processAssets + PROCESS_ASSETS_STAGE 的形式

谢谢🙏

vue3+tsx不支持？

描述这个Bug

vue3+tsx貌似不生效

代码url
https://github.com/agileago/vue3-taro

如何重现
Steps to reproduce the behavior:

1. pnpm i
2. pnpm run dev
3. 打开微信开发者工具

期望行为(可选)

小程序tailwindcss生效

屏幕截图(可选)

运行环境

• OS: [e.g. iOS]
• Nodejs: 16x
• Framework: taro vue3 tsx

支持pnpm

描述这个Bug
使用pnpm的时候, 会报错

代码url
官方demo, 把包管理器改成pnpm就能复现

如何重现
Steps to reproduce the behavior:

1. rm yarn.lock
2. pnpm install
3. pnpm run dev

屏幕截图(可选)

demo 的uniapp我跑不起来

uni-app H5环境下类似h-[36rpx]之类的类名无效

描述这个Bug
项目中的/demo/uni-app-vue3-vite项目模板，编译成H5之后，使用了[]的行内类名无效。
但是在style标签内通过@apply注册的有效；

另外初始化样式只对view有做处理，image和text标签未作处理导致很多样式无法生效；通过@layer base 指令也无法添加上去新的样式；

代码url
/pages/index/index:

<template>
  <view class="content">

    <view class="mt-5 test">test</view>
    <!-- h-[36rpx] 这个样式没有效果 -->
    <image src="https://ttmini.yizhiwechat.com/ktts/icon-back-black.png" mode="aspectFit" class="test-image w-6 h-[36rpx]" ></image>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const title = ref("测试标题");
const flag = ref(true);
</script>

<style lang="scss">
.test {
  @apply flex items-center justify-center w-20 mx-auto mt-20;
}
.test-image {
  @apply mt-[36rpx];
}
</style>

可提供转化失败的 wxml,js,wxss 这类的产物，
可以直接复制粘贴在此处，或者提供 url

如何重现
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

期望行为(可选)
A clear and concise description of what you expected to happen.

屏幕截图(可选)

运行环境

• OS: [e.g. iOS]
• Nodejs: 16x
• Framework: uni-app/taro/remax/rax

Additional context
Add any other context about the problem here.

请问如何通过npm来安装这一系列的依赖?

描述这个Bug
请问如何通过npm来安装这一系列的依赖，而不是yarn?
感谢，因为项目是npm管理的

编译后导致动态绑定的类名错误

描述这个Bug
调用ViteWeappTailwindcssPlugin这个插件后，元素的动态绑定类名和静态类名共存时，类名之间的空间消失了，导致样式异常；

代码url
代码就是原https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin#uni-app-for-vite-vue3这个uni-app的vue3示例项目，
vite.config.ts:

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
// import { ViteWeappTailwindcssPlugin as vwt, postcssWeappTailwindcssRename } from '../..'
import { ViteWeappTailwindcssPlugin as vwt, postcssWeappTailwindcssRename } from 'weapp-tailwindcss-webpack-plugin'
export default defineConfig({
  // 仅调用uni()就是正常的
  plugins: [uni(), vwt()],
  css: {
    postcss: {
      plugins: [
        require('autoprefixer')(),
        require('tailwindcss')(),
        require('postcss-rem-to-responsive-pixel')({
          rootValue: 32,
          propList: ['*'],
          transformUnit: 'rpx'
        }),
        postcssWeappTailwindcssRename({
          // cssPreflight: {
          //   'box-sizing': false
          // }
        })
      ]
    }
  }
})

pages/index/index.vue:

<template>
  <view class="flex items-center justify-center w-screen h-screen">
    <view class="font-bold text-blue-500" :class="[
    'text-2xl',{'underline':true}
    ]">{{title}}</view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const title = ref('测试标题')
</script>

<style lang="scss" scoped></style>

可提供转化失败的 wxml,js,wxss 这类的产物，
可以直接复制粘贴在此处，或者提供 url

如何重现
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

期望行为(可选)

屏幕截图(可选)

运行环境

• OS: [e.g. iOS]
• Nodejs: 16x
• Framework: uni-app/taro/remax/rax

Additional context
Add any other context about the problem here.

uniapp vue2 报错 webpack module not found

在运营的电脑上无法发布,是因为缺少webpack的环境吗

Taro3.3.10编写tailwindcss不生效

描述这个Bug
编写tailwindcss不生效

代码url
https://gitee.com/LsStudy/taro-test3.3.10.git

运行环境

• Taro: 3.3.10
• weapp-tailwindcss-webpack-plugin: 1.11.5
  "postcss": "^8.4.18",
  "postcss-rem-to-responsive-pixel": "^5.1.3",
  "tailwindcss": "^3.2.1",
  "weapp-tailwindcss-webpack-plugin": "^1.11.5"

space-y-3 space-x-3 这类写法不起作用问题的参考，与外层套view标签，或者 virtualHost 解决方案

描述这个Bug
字节小程序space-y-3 space-x-3 这类写法不起作用，微信小程序良好

代码url

https://github.com/sonofmagic/tw-space-issues

如何重现
space-y-3 space-x-3 添加造元素dom

期望行为(可选)
兼容或者提供配置项

屏幕截图(可选)

运行环境

• OS: [e.g. iOS]
• Nodejs: 16x
• Framework: taro

1.1.1版本在taro下不能正常进行JIT编译，会将text-[16px]编译成 text -16xp。1.0.8下则正常。

描述这个Bug
1.1.1版本在taro下不能正常进行JIT编译，会将text-[16px]编译成 text -16xp。1.0.8下则正常。

盒子模型全部都是border-box，请问我该如何修改?

环境为微信小程序

// postcss

const isH5 = process.env.UNI_PLATFORM === 'h5'

const plugins = [require('autoprefixer')(), require('tailwindcss')()]

if (!isH5) {
  plugins.push(
    require('postcss-rem-to-responsive-pixel')({
      rootValue: 32,
      propList: ['*'],
      transformUnit: 'rpx',
    }),
  )

  plugins.push(require('weapp-tailwindcss-webpack-plugin/postcss')())
}

module.exports = {
  plugins,
}

// tailwindcss

module.exports = {
  content: ['./index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  },
}

// vite.config

import { join } from 'path'
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

import { postcssWeappTailwindcssRename, ViteWeappTailwindcssPlugin as vwt } from 'weapp-tailwindcss-webpack-plugin'

const postcssPlugins = [require('autoprefixer')(), require('tailwindcss')()]

postcssPlugins.push(
  require('postcss-rem-to-responsive-pixel')({
    rootValue: 32,
    propList: ['*'],
    transformUnit: 'rpx',
  }),
)
postcssPlugins.push(postcssWeappTailwindcssRename())

function resolve(dir: string): string {
  return join(__dirname, dir)
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vwt(), uni()],
  resolve: {
    alias: {
      '@': resolve('src/'),
    },
  },
  css: {
    postcss: {
      plugins: postcssPlugins,
    },
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@/assets/scss/mixins.scss";
        `,
      },
    },
  },
})

可不可以支持小程序的原生框架使用tailwind？

可不可以支持小程序的原生webpak框架使用tailwind？
我看到目前都是第三方框架的使用，有没有可能直接使用原生框架来支持taiwind？
https://github.com/listenzz/MyMina
这个是webpak5的原生小程序工程，希望能在这里直接使用taiwind 3.

ps: 不好意思，label 选错了，不应该是Bug

uniapp demo运行报错Cannot find module '@dcloudio/uni-ui/lib/uni-shadow-root/uni-shadow-root.vue'

https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/tree/main/demo/uni-app

不支持rpx吗

希望添加 Vite Weapp tailwindcss 插件

希望添加 Vite Weapp tailwindcss 插件 😃

解析内联wxs标签时，遇到 < 出现匹配错误，源自于 @icebreakers/wxml 错误的解析

描述这个Bug
解析内联wxs标签时，遇到 < 出现匹配错误，源自于 @icebreakers/wxml 错误的解析

代码url

<wxs module="status">
    function get(index, active) {
      if (index < active) {
        return 'finish';
      } else if (index === active) {
        return 'process';
      }

      return 'inactive';
    }

    module.exports = get;
    </wxs>

如何重现

  it('wxs should be ignored ', async () => {
    const testCase = `<wxs module="status">
    function get(index, active) {
      if (index < active) {
        return 'finish';
      } else if (index === active) {
        return 'process';
      }

      return 'inactive';
    }

    module.exports = get;
    </wxs>`
    const result = await templeteHandler(testCase)

    expect(result).toBe(testCase)
  })

运行环境

• OS: Win10
• Nodejs: 16x
• Framework: ALL

不推荐在 class 里，直接使用rpx单位，比如 `text-[32rpx] border-[10rpx]`. 源自于 `tailwindcss 3.2.x` 改动导致一些rpx写法的变化，建议一看，持续追踪

tailwindlabs/tailwindcss#9675

uniapp vue2项目开发中间过程中引入的tailwindcss,按照步骤引入了,项目启动后,原有的样式受影响了,是怎么回事?

描述这个Bug
项目启动后,原有的样式受影响了,原有样式失效了,tailwindcss的语法样式也失效了,截图如下面,这个要如何处理呢?

屏幕截图

伪元素 before:content-[*] 使用 arbitrary value 编译后存在未转译的反斜杠

Taro 3.5 / React

字典是否漏掉了这种情况

Taro 3.5.6 按照示例 安装 无法运行

发生以上错误

react demo报错

描述这个Bug
react demo中代码不能build。ProgressPlugin.js报错

如何重现
npm run build

error log
/Users/llx/weapp-webpack5/demo/taro-app/node_modules/webpack/lib/ProgressPlugin.js:242
compilation.hooks[name].intercept({
^

TypeError: Cannot read properties of undefined (reading 'intercept')
at /Users/llx/weapp-webpack5/demo/taro-app/node_modules/webpack/lib/ProgressPlugin.js:242:30
at Array.forEach ()
at /Users/llx/weapp-webpack5/demo/taro-app/node_modules/webpack/lib/ProgressPlugin.js:239:24
at Hook.eval (eval at create (/Users/llx/weapp-webpack5/demo/taro-app/node_modules/@tarojs/webpack5-runner/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), 💯1)
at Hook.CALL_DELEGATE [as _call] (/Users/llx/weapp-webpack5/demo/taro-app/node_modules/@tarojs/webpack5-runner/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
at Compiler.newCompilation (/Users/llx/weapp-webpack5/demo/taro-app/node_modules/@tarojs/webpack5-runner/node_modules/webpack/lib/Compiler.js:1109:26)
at /Users/llx/weapp-webpack5/demo/taro-app/node_modules/@tarojs/webpack5-runner/node_modules/webpack/lib/Compiler.js:1153:29
at Hook.eval [as callAsync] (eval at create (/Users/llx/weapp-webpack5/demo/taro-app/node_modules/@tarojs/webpack5-runner/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/llx/weapp-webpack5/demo/taro-app/node_modules/@tarojs/webpack5-runner/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
at Compiler.compile (/Users/llx/weapp-webpack5/demo/taro-app/node_modules/@tarojs/webpack5-runner/node_modules/webpack/lib/Compiler.js:1148:28)

JIT模式未能替换百分号%

描述这个Bug

JIT模式下使用百分比数值时未能替换百分号%

如何重现

<View className="h-[200%]" />

实际生成的代码

.h-_l_200\%_r_ {
  height: 200%;
}

期望生成的代码

.h-_l_200_pct_r_ {
  height: 200%;
}

找不到tailwindcss的代码提示了

用这种方式 vscode 的插件Tailwind CSS IntelliSense 找不到tailwindcss的代码提示了 和 基于HbuilderX的tailwind css智能提示工具 也没有代码提示了！

安卓 IOS app -[xxx] 变量值无效

min-w-[300rpx] max-h-[100px] text-[20px] leading-[0.9] divide-x-[10px] divide-[#010101]

MacOS打开微信开发者工具热重载, 热更新无效

描述这个Bug
微信开发者工具热重载打开时, dist热更新无效

代码url

可提供转化失败的 wxml,js,wxss 这类的产物，
可以直接复制粘贴在此处，或者提供 url

如何重现
打开微信开发者工具的热重载

期望行为(可选)
编译后的dist代码在微信开发者工具中实时更新

屏幕截图(可选)

运行环境

• OS: MacOs 12.0.1 (21A559)
• Nodejs: 14.17.6
• Framework: taro
• taro info
  

Additional context
Add any other context about the problem here.

如果文件的最后一个tag的最后一个属性是class或className，那么会造成下一个文件处理错误

描述这个Bug
如果文件的最后一个tag的最后一个属性是class或className，那么会造成下一个文件处理错误。因为jsx/replacer里的判断

if (path.node.start > classObjectNode.end) {
    return end();
}

对于恰好是文件末的时候，不会end。建议最好是在BaseJsxWebpackPlugin的新文件开始处理前强制重置replacer状态。

.class > * 没有被编译

1.7.1 版本正常，1.7.2 版本报错。

rax框架下，使用postcss7和tailwindcss2的注意点 —— [QUESTION]如何解决会生成.\32xl

描述这个Bug
A clear and concise description of what the bug is.

• rax
• 会生成很多.\32xl开头的样式
• 小程序就无法运行
• 不知道哪里关闭生成

代码url

可提供转化失败的 wxml,js,wxss 这类的产物，
可以直接复制粘贴在此处，或者提供 url

...

.\32xl_top-28{
    top: 29.869vw;
  }

  .\32xl_top-32{
    top: 34.136vw;
  }

...

如何重现
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

期望行为(可选)
A clear and concise description of what you expected to happen.

屏幕截图(可选)
If applicable, add screenshots to help explain your problem.

运行环境

• OS: [e.g. iOS]
• Nodejs: 16x
• Framework: uni-app/taro/remax/rax

Additional context
Add any other context about the problem here.

[Vite Uniapp版] 更新uniapp依赖后，无法正常运行

描述这个Bug
更新依赖后，无法正常运行

如何重现
使用 taze 更新依赖版本

@rea ➜ uni-app-vue3-vite git(main) : taze

uni-preset-vue - 5 minor, 6 patch, 15 prerelease

  @dcloudio/types                   dev  ~4mo                        ^2.5.17  →                        ^2.6.11  ~15d  
  sass                              dev  ~4mo                        ^1.49.9  →                        ^1.52.3   ~6d  
  tailwindcss                       dev  ~4mo                        ^3.0.23  →                         ^3.1.3   ⩽1d  
  typescript                        dev  ~4mo                         ^4.6.2  →                         ^4.7.3  ~11d  
  vite                              dev  ~4mo                         ^2.8.6  →                        ^2.9.12   ~5d  
  vue                                    ~4mo                        ^3.2.30  →                        ^3.2.37   ~9d  
  vue-i18n                               ~8mo                         ^9.1.9  →                        ^9.1.10  ~1mo  
  autoprefixer                      dev  ~2mo                        ^10.4.5  →                        ^10.4.7  ~1mo  
  postcss                           dev  ~4mo                         ^8.4.7  →                        ^8.4.14  ~28d  
  postcss-rem-to-responsive-pixel   dev  ~4mo                         ^5.1.1  →                         ^5.1.3  ~11d  
  weapp-tailwindcss-webpack-plugin  dev   ~5d                         ^1.6.2  →                      
  @dcloudio/uni-app                      ~4mo  ^3.0.0-alpha-3031120220216001  →  ^3.0.0-alpha-3041720220614001   ⩽1d  
  @dcloudio/uni-app-plus                 ~4mo  ^3.0.0-alpha-3031120220216001  →  ^3.0.0-alpha-3041720220614001   ⩽1d  
  @dcloudio/uni-components               ~4mo  ^3.0.0-alpha-3031120220216001  →  ^3.0.0-alpha-3041720220614001   ⩽1d  
  @dcloudio/uni-h5                       ~4mo  ^3.0.0-alpha-3031120220216001  →  ^3.0.0-alpha-3041720220614001   ⩽1d  
  @dcloudio/uni-mp-alipay                ~4mo  ^3.0.0-alpha-3031120220216001  →  ^3.0.0-alpha-3041720220614001   ⩽1d  
  @dcloudio/uni-mp-baidu                 ~4mo  ^3.0.0-alpha-3031120220216001  →  ^3.0.0-alpha-3041720220614001   ⩽1d  
  @dcloudio/uni-mp-kuaishou              ~4mo  ^3.0.0-alpha-3031120220216001  →  ^3.0.0-alpha-3041720220614001   ⩽1d  
  @dcloudio/uni-mp-lark                  ~4mo  ^3.0.0-alpha-3031120220216001  →  ^3.0.0-alpha-3041720220614001   ⩽1d  
  @dcloudio/uni-mp-qq                    ~4mo  ^3.0.0-alpha-3031120220216001  →  ^3.0.0-alpha-3041720220614001   ⩽1d  
  @dcloudio/uni-mp-toutiao               ~4mo  ^3.0.0-alpha-3031120220216001  →  ^3.0.0-alpha-3041720220614001   ⩽1d  
  @dcloudio/uni-mp-weixin                ~4mo  ^3.0.0-alpha-3031120220216001  →  ^3.0.0-alpha-3041720220614001   ⩽1d  
  @dcloudio/uni-quickapp-webview         ~4mo  ^3.0.0-alpha-3031120220216001  →  ^3.0.0-alpha-3041720220614001   ⩽1d  
  @dcloudio/uni-automator           dev  ~4mo  ^3.0.0-alpha-3031120220216001  →  ^3.0.0-alpha-3041720220614001   ⩽1d  
  @dcloudio/uni-cli-shared          dev  ~4mo  ^3.0.0-alpha-3031120220216001  →  ^3.0.0-alpha-3041720220614001   ⩽1d  
  @dcloudio/vite-plugin-uni         dev  ~4mo  ^3.0.0-alpha-3031120220216001  →  ^3.0.0-alpha-3041720220614001   ⩽1d  


Run taze major to check major updates
Run taze -w to write package.json

屏幕截图(可选)

运行环境

• OS: [e.g. iOS] MacOS
• Nodejs: 16x
• Framework: uni-app vite

【问题】希望支持 Remax

目前尝试使用 remax 报错如下

Error: Unexpected char `/` in state `ATTRIBUTE_NAME` with action `SLASH`line:27,column:2
    at .../node_modules/weapp-tailwindcss-webpack-plugin/dist/index.js:1:4984

配置如下：

• postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')(),
    require('tailwindcss')({ config: './tailwind.config.js' }),
    require('postcss-rem-to-responsive-pixel/postcss7')({
      rootValue: 32,
      propList: ['*'],
      transformUnit: 'rpx'
    })
  ]
}

• webpack 配置 remax.config.js

const { UniAppWeappTailwindcssWebpackPluginV4 } = require('weapp-tailwindcss-webpack-plugin')

module.exports = {
  configWebpack({ config, webpack}) {
    config.plugin('weapp-tailwindcss-webpack-plugin').use(UniAppWeappTailwindcssWebpackPluginV4)
  }
}

• tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: {
    content: ['./src/**/*.{vue,js,ts,jsx,tsx,wxml}']
  },
  corePlugins: {
    preflight: false
  }
}

小程序使用 after:border-none 报错

描述这个Bug
小程序使用 after:border-none 报错

代码url

北京市

微信开发工具报错：
[ WXSS 文件编译错误] ./app.wxss
unexpected token "}"

版本："weapp-tailwindcss-webpack-plugin": "^1.8.2"