taro使用@tarojs/plugin-html插件时，会导致不生成css变量，导致某些样式不生效，例如rotate-45，这个和本插件无关，单独使用tailwindcss也有这个问题

[QingYuanO]

2.x.x没有生成

[sonofmagic]

你好，你能具体说一下是缺少了哪些css变量吗？rotate-45 我试了一下在我这是好的

[QingYuanO]

你好，你能具体说一下是缺少了哪些css变量吗？rotate-45 我试了一下在我这是好的

我的好像是没有生成这个东西

[QingYuanO]

你好，你能具体说一下是缺少了哪些css变量吗？rotate-45 我试了一下在我这是好的

我的好像是没有生成这个东西

能看下你的tailwind配置吗？

[sonofmagic]

我的配置就是默认的：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false
  }
}

这样的，我看你最前面发的第一张是有 view,::before,::after 这个选择器来注入所有的css变量的

[QingYuanO]

我的配置就是默认的：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false
  }
}

这样的，我看你最前面发的第一张是有 view,::before,::after 这个选择器来注入所有的css变量的

那个是1.x.x的版本，我现在的项目没有生成view,::before,::after选择器，可能是这个原因，我再看下是不是我这个项目的原因

[sonofmagic]

我大概知道原因了，你能发一下你的 tailwindcss 版本和打包出来的 dist/app.wxss 内容嘛，我怀疑是选择器没有被更新替换，可能是我 2.x.x 更改了css变量注入域的判断标准导致的。

[QingYuanO]

我大概知道原因了，你能发一下你的 tailwindcss 版本和打包出来的 dist/app.wxss 内容嘛，我怀疑是选择器没有被更新替换，可能是我 2.x.x 更改了css变量注入域的判断标准导致的。 "tailwindcss": "^3.3.1"

[QingYuanO]

生成的是上面的两个选择器

[sonofmagic]

奇怪了，主css变量注入的块丢了，是不是什么插件把它干掉了，要不加群大家一起看看吧，就在置顶issue里。

[QingYuanO]

奇怪了，主css变量注入的块丢了，是不是什么插件把它干掉了，要不加群大家一起看看吧，就在置顶issue里。

https://github.com/QingYuanO/taro-simple-template 这个模板

[sonofmagic]

我fork了这个模板，下载了之后发现，即使我卸载了我这个插件，重新安装。运行 yarn dev:weapp tailwindcss 在 app.wxss 里也没有生成对应的变量块。怀疑是插件或者配置问题，导致tailwindcss 生成的css变量块被去除，导致我的插件没找到那个变量块。

[sonofmagic]

调试之后找到问题了，是 @tarojs/plugin-html 导致的，注释掉这个css变量注入块的选择器就出来了，具体细节要在研究研究。

[QingYuanO]

调试之后找到问题了，是 @tarojs/plugin-html 导致的，注释掉这个css变量注入块的选择器就出来了，具体细节要在研究研究。

OK，感谢回复

[QingYuanO]

我看了下@tarojs/plugin-html，它好像会默认把微信小程序不兼容的选择器去除掉

[sonofmagic]

是的，看上去这时候需要配置一下这个插件:

config = {
  // ...
  mini: {
    // ...
    postcss: {
      htmltransform: {
        enable: true,
          config: {
            removeCursorStyle: false,
          }
      },
    },
  },
}

把默认的去除关闭，不然整个 tailwindcss 变量注入区域，都会被它预先给干掉了。

https://taro-docs.jd.com/docs/use-h5#%E6%8F%92%E4%BB%B6-postcss-%E9%85%8D%E7%BD%AE%E9%A1%B9

[QingYuanO]

@tarojs/plugin-htm内部使用了一个叫做postcss-html-transform的插件，可以在config/index中配置

config = {
  // ...
  mini: {
    // ...
    postcss: {
      htmltransform: {
        enable: false, // 小程序默认关闭该配置
        config: {
          removeCursorStyle: true, // 默认为 true
        },
      },
    },
  },
}

把它关了好像就可以了，但是不知道会不会影响到@nutui/nutui-react-taro组件库，应为它是基于@tarojs/plugin-html插件的

[QingYuanO]

@nutui/nutui-react-taro组件库样式直接乱掉☹

[sonofmagic]

@nutui/nutui-react-taro组件库样式直接乱掉☹

额，是由于 tailwindcss @base 里的 preflight 导致的嘛？那可以通过配置在特定平台那去掉，其他导致的就不知道了，只能具体问题具体分析。

[QingYuanO]

@nutui/nutui-react-taro组件库样式直接乱掉☹

额，是由于 tailwindcss @base 里的 preflight 导致的嘛？那可以通过配置在特定平台那去掉，其他导致的就不知道了，只能具体问题具体分析。

估计是这个组件库估计需要开启htmltransform

[agileago]

同样遇到这个问题

[sonofmagic]

这个问题现在的解法是这样的:

https://weapp-tw.icebreaker.top/docs/quick-start/frameworks/taro#%E5%92%8C-nutui-%E4%B8%80%E8%B5%B7%E4%BD%BF%E7%94%A8

https://weapp-tw.icebreaker.top/docs/api/interfaces/UserDefinedOptions#injectadditionalcssvarscope

开启这个选项去重新注入css变量作用区块

[agileago]

3.6.11有效

[xuzuodong]

同样遇到这个问题，感谢大佬🫶

解决的配置：

chain.merge({
    plugin: {
        install: {
            plugin: UnifiedWebpackPluginV5,
            args: [{
                appType: 'taro',
                injectAdditionalCssVarScope: true, // 配置此字段为 true 即可
            }],
        },
    },
})