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

[YesWen]

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

[sonofmagic]

这里我给出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;

[sonofmagic]

还遇到问题再 reopen 吧

[guohui666]

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

[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
  }
}

[guohui666]

cli版本 2.0.2-alpha-3080320230522001

[sonofmagic]

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

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

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

[guohui666]

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

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

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

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

[guohui666]

看社区管不管了