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

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

Aug 05 '22 03:08 YesWen

这里我给出2份uni-app配置，你可以试一下：

vue3 vite.config.js

import path from "path";
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import vwt from "weapp-tailwindcss-webpack-plugin/vite";
import postcssWeappTailwindcssRename from "weapp-tailwindcss-webpack-plugin/postcss";
// 注意： 打包成 h5 和 app 都不需要开启插件配置
const isH5 = process.env.UNI_PLATFORM === "h5";
const isApp = process.env.UNI_PLATFORM === "app-plus";
const WeappTailwindcssDisabled = isH5 || isApp;
// vite 插件配置
const vitePlugins = [uni()];

const resolve = (p) => {
  return path.resolve(__dirname, p);
};

const postcssPlugins = [
  require("autoprefixer")(),
  require("tailwindcss")({
    config: resolve("./tailwind.config.js"),
  }),
];
if (!WeappTailwindcssDisabled) {
  vitePlugins.push(vwt());
  postcssPlugins.push(postcssWeappTailwindcssRename({}));
}
// https://vitejs.dev/config/
export default defineConfig({
  plugins: vitePlugins,
  // 假如 postcss.config.js 不起作用，请使用内联 postcss Latset
  css: {
    postcss: {
      plugins: postcssPlugins,
    },
  },
});

vue2 vue.config.js

if (process.env.NODE_ENV === "development") {
  process.env.TAILWIND_MODE = "watch";
}

const isH5 = process.env.UNI_PLATFORM === "h5";
const isApp = process.env.UNI_PLATFORM === "app-plus";

const WeappTailwindcssDisabled = isH5 || isApp;

const {
  UniAppWeappTailwindcssWebpackPluginV4,
} = require("weapp-tailwindcss-webpack-plugin");

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
const config = {
  //....
  configureWebpack: {
    plugins: [
      new UniAppWeappTailwindcssWebpackPluginV4({
        disabled: WeappTailwindcssDisabled,
      }),
    ],
  },
  //....
};

module.exports = config;

Aug 05 '22 05:08 sonofmagic

还遇到问题再 reopen 吧

Sep 05 '22 15:09 sonofmagic

这个问题有结论吗？我也遇到了

May 30 '23 13:05 guohui666

正式云原生打包是没有问题的，但是通过自定义基座调试的时候，变量值就失效了，尝试了降级，没有解决

依赖

  "tailwindcss": "^3.3.2",
  "weapp-tailwindcss-webpack-plugin": "^2.4.2"

vue.config.js

const TransformPages = require('uni-read-pages')
const { WeappTailwindcssDisabled } = require("./platform");
const {webpack} = new TransformPages()

const {
  UnifiedWebpackPluginV5,
} = require("weapp-tailwindcss-webpack-plugin");


module.exports = {
  transpileDependencies: ['luch-request'],
  chainWebpack: (config) => {
  },
  configureWebpack: {
    plugins: [
      new UnifiedWebpackPluginV5({
        disabled: WeappTailwindcssDisabled,
        cssPreflight: false
      }),
      new webpack.DefinePlugin({
        ROUTES: webpack.DefinePlugin.runtimeValue(() => {
          const tfPages = new TransformPages({
            includes: ['path', 'name', 'meta']
          });
          return JSON.stringify(tfPages.routes)
        }, true )
      })
    ]
  }
}

postcss.config.js

const { WeappTailwindcssDisabled } = require("./platform");
const path = require('path')
const webpack = require('webpack')
const config = {
  parser: require('postcss-comment'),
  plugins: [
    require('postcss-import')({
      resolve (id, basedir, importOptions) {
        if (id.startsWith('~@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
        } else if (id.startsWith('@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
        } else if (id.startsWith('/') && !id.startsWith('//')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
        }
        return id
      }
    }),
    require("tailwindcss")({
      config: path.resolve(__dirname, "./tailwind.config.js")
    }),
    require('autoprefixer')({
      remove: process.env.UNI_PLATFORM !== 'h5'
    }),
    WeappTailwindcssDisabled
      ? undefined
      : require("postcss-rem-to-responsive-pixel")({
        rootValue: 32,
        propList: ["*"],
        transformUnit: "rpx",
      }),
    require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
  ]
}
if (webpack.version[0] > 4) {
  delete config.parser
}
module.exports = config

tailwind.config.js

const plugin = require('tailwindcss/plugin')
const { isWeixin } = require('./platform')
const spacings = [2, 4, 5, 10, 12, 14, 15, 16, 20, 26, 30, 40, 50, 60, 500]
const width = [50, 70, 80, 150, 204, 335, 280, 348, 500, 1300]
const height = [32, 40, 50, 70, 90, 100, 500]
const gap = [5, 10, 15, 20]
const fontSize = [12, 14, 16, 18, 20, 24, 28, 32, 36]
const borderRadius = [2, 4, 6, 8, 10, 20, 40, 50]
/** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */
module.exports = {
  content: [
    './public/index.html',
    './src/components/**/*.{html,js,ts,jsx,tsx,vue}',
    './src/components/JrAdminTaskList/index.vue',
    './src/components/**/**.{html,js,ts,jsx,tsx,vue}',
    './src/components/*.{html,js,ts,jsx,tsx,vue}',
    './src/pages/**/*.{html,js,ts,jsx,tsx,vue}',
    './src/pages/**/**/*.{html,js,ts,jsx,tsx,vue}'
  ],
  theme: {
    extend: {
      backgroundColor: {
        'jr-default': 'var(--jr-bg)'
      },
      borderRadius: {
        ...borderRadius.reduce((pre, cur) => {
          pre[`${cur}px`] = `${cur}px`
          pre[`${cur}rpx`] = `${cur}rpx`
          return pre
        }, {})
      },
      textColor: {
        'jr-primary': 'var(--jr-text)',
        'jr-sub': 'var(--jr-text-sub)',
        'jr-tip': 'var(--jr-text-tip)'
      },
      colors: {
        'jr-main-color': 'var(--jr-main-color)',
        'jr-border-def': 'var(--jr-border-def)',
        'jr-bright-orange': 'var(--color-bright-orange)',
        'jr-charcoal-grey': 'var(--color-charcoal-grey)',
        'jr-slate-grey': 'var(--color-slate-grey)',
        'jr-cool-grey': 'var(--color-cool-grey)',
        'jr-whitesmoke': 'var(--color-whitesmoke)',
        'jr-light-blue-grey': 'var(--color-light-blue-grey)',
        'jr-peach-puff': 'var(--color-peach-puff)'
      },
      gap: {
        ...gap.reduce((pre, cur) => {
          pre[`${cur}px`] = `${cur}px`
          pre[`${cur}rpx`] = `${cur}rpx`
          return pre
        }, {})
      },
      spacing: {
        ...spacings.reduce((pre, cur) => {
          pre[`${cur}px`] = `${cur}px`
          pre[`${cur}rpx`] = `${cur}rpx`
          return pre
        }, {})
      },
      width: {
        ...width.reduce((pre, cur) => {
          pre[`${cur}px`] = `${cur}px`
          pre[`${cur}rpx`] = `${cur}rpx`
          return pre
        }, {})
      },
      height: {
        ...height.reduce((pre, cur) => {
          pre[`${cur}px`] = `${cur}px`
          pre[`${cur}rpx`] = `${cur}rpx`
          return pre
        }, {})
      },
      fontSize: {
        ...fontSize.reduce((pre, cur) => {
          pre[`${cur}px`] = `${cur}px`
          pre[`${cur}rpx`] = `${cur}rpx`
          return pre
        }, {})
      }
    }
  },
  variants: {},
  plugins: [
    plugin(function ({ addUtilities, matchUtilities, theme }) {
      matchUtilities(
        {
          // Class name
          'safe-pb': (value) => {
            value = isNaN(value) ? value : `${value}px`
            return {
              paddingBottom: [
                value,
                `calc(${value ?? 0} + env(safe-area-inset-bottom))`,
                `calc(${value ?? 0} + constant(safe-area-inset-bottom))`
              ]
              // backgroundColor: value, // Desired CSS properties here
              // color: theme('colors.white') // Just for example non-dynamic value
            }
          }
        },
        // Default values.
        // `flattenColorPalette` required to support native Tailwind color classes like `red-500`, `amber-300`, etc.
        // In most cases you may just pass `theme('config-key')`, where `config-key` could be any (`spacing`, `fontFamily`, `foo`, `bar`)
        { values: theme('spacing') }
      )
      addUtilities({
        '.f-center': {
          display: 'flex',
          'align-items': 'center',
          'justify-content': 'center'
        },
        '.padding-safe-bottom': {
          paddingBottom: [`0`, `constant(safe-area-inset-bottom)`, `env(safe-area-inset-bottom)`]
        },
        '.bg-gradient-jr-main-btn': {
          background: 'linear-gradient(81.64deg, #ff8e00 6.41%, #f8500c 93.59%)'
        }
      })
    })
  ],
  corePlugins: {
    preflight: !isWeixin
  }
}

May 30 '23 13:05 guohui666

cli版本 2.0.2-alpha-3080320230522001

May 30 '23 13:05 guohui666

其实在 app(安卓/ios) 的时候，已经通过disabled: WeappTailwindcssDisabled 这个配置，把我这个插件给禁用掉了

因为按照我原先的预计，app(安卓/ios) 平台应该和 h5 一样，是原生 tailwindcss 支持的场景

看了你这个 issue ，我感觉像是 uni-app 在自定义基座调试时候的问题。

May 30 '23 13:05 sonofmagic

其实在 app(安卓/ios) 的时候，已经通过disabled: WeappTailwindcssDisabled 这个配置，把我这个插件给禁用掉了

因为按照我原先的预计，app(安卓/ios) 平台应该和 h5 一样，是原生 tailwindcss 支持的场景

看了你这个 issue ，我感觉像是 uni-app 在自定义基座调试时候的问题。

ε=(´ο｀*)))唉吐了

May 30 '23 13:05 guohui666

看社区管不管了

May 30 '23 14:05 guohui666

我也查查这个问题，照理说只要 webpack 的 postcss-loader 触发 tailwindcss 就没问题的，

或者可能自定义基座调试，也需要对 class 进行转义？这我要查一查。

May 30 '23 14:05 sonofmagic

我目前是vue2版本的项目, 调试基座和云打包都没什么问题

May 31 '23 08:05 imaxing

看社区管不管了

你用 hbuilderx 来云打包和自定义基座调试的把，hbuilderx 里也有正式版和 Alpha版，你用的是哪个版本，照理说装的是 2.0.2-alpha，应该用 Alpha版本的 hbuilderx

May 31 '23 09:05 sonofmagic

看社区管不管了

你用 hbuilderx 来云打包和自定义基座调试的把，hbuilderx 里也有正式版和 Alpha版，你用的是哪个版本，照理说装的是 2.0.2-alpha，应该用 Alpha版本的 hbuilderx

是alpha版本

Jun 01 '23 00:06 guohui666

查看调试的时候打包的内容，class是生成的

但是css内容却没有生成

Jun 02 '23 01:06 guohui666

我想我可能知道什么问题了。。。。

Jun 02 '23 01:06 guohui666

话说你配置了

const isH5 = process.env.UNI_PLATFORM === 'h5'
const isApp = process.env.UNI_PLATFORM === 'app-plus'
const WeappTailwindcssDisabled = isH5 || isApp;
 new UnifiedWebpackPluginV5({
        disabled: WeappTailwindcssDisabled,
})

吗？

这个问题，我已经看出原因了，显然是app这里生效了我这个插件，但是app不像小程序那样，生成了单独的 wxss 文件，导致 cssMatcher 没有匹配上导致的。

你在打包成 app 环境下，记得禁用我这个插件，你的图里，插件是开启的。

Jun 02 '23 01:06 sonofmagic

这里不是app，是app-plus

Jun 02 '23 01:06 guohui666

从你的demo项目copy过来的，没检查。。。

Jun 02 '23 01:06 guohui666

原来是app-plus...我没写过这个平台，处理方式和 app 一样嘛

Jun 02 '23 01:06 sonofmagic

原来是app-plus...我没写过这个平台，处理方式和 app 一样嘛

没有app这个值吧，app平台都是app-plus

Jun 02 '23 01:06 guohui666

https://uniapp.dcloud.net.cn/tutorial/platform.html

是的，没有 app 这个值.... 我的我去改一下模板 (/ω＼)

Jun 02 '23 01:06 sonofmagic

https://uniapp.dcloud.net.cn/tutorial/platform.html

是的，没有 app 这个值.... 我的我去改一下模板 (/ω＼)

给我郁闷好几天，解决了就舒服了

Jun 02 '23 01:06 guohui666

在从v1升级到v2的过程中，如果使用了云函数相关功能，编译到小程序会出现问题，我提问的链接在这里，你可以在迁移到v2的文档里写一下，避免后来的兄弟踩坑，排查好久 https://ask.dcloud.net.cn/question/170057

Jun 02 '23 02:06 guohui666

在从v1升级到v2的过程中，如果使用了云函数相关功能，编译到小程序会出现问题，我提问的链接在这里，你可以在迁移到v2的文档里写一下，避免后来的兄弟踩坑，排查好久 https://ask.dcloud.net.cn/question/170057

感谢，Thanks♪(･ω･)ﾉ

Jun 02 '23 02:06 sonofmagic

weapp-tailwindcss weapp-tailwindcss copied to clipboard

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

vue3 vite.config.js

vue2 vue.config.js

weapp-tailwindcss
weapp-tailwindcss copied to clipboard