项目背景

本项目是创新项目，但技术栈旧中带新，技术栈如下：

• 构建工具：vue-cli,webpack5
• 框架：vue3, pinia,typescript,tailwindcss
• 垂直领域：wasm，canvas

问题及解决

• tailwindcss相关

  • 自定义class找不到

  The `flex-center` class does not exist. If `flex-center` is a custom class, make sure it is defined within a `@layer` directive.
  
    51 | }
    52 | .tools-left-wrap .tools-tabs > .el-tabs__header .el-tabs__item {
  > 53 |   @apply w-[114px] h-[64px] p-0 flex-center border-none mt-[12px];
       |   ^
    54 | }
    55 | .tools-left-wrap
  

  官网有这个问题的回答，见这里 (opens new window)。实际上，原style中文件写法如下。

  @layer utilities {
    .flex-center {
      @apply flex justify-center items-center;
    }
  }
  

  只需要将utilities改成components就不会报错了，但为了保险起见，还是遵循官方的用法，使用插件系统来配置。先删除原style的写法，然后新增如下代码。

  // tailwind.config.js
  const plugin = require('tailwindcss/plugin');
  module.exports = {
    plugins: [
      plugin(function ({ addComponents, theme }) {
        addComponents({
          '.flex-center': {
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          },
        });
      }),
    ],
  };
  
  

• vue.config.ts相关

  • configureWebpack配置

    官方支持两种方式，1是对象，2是函数，见文档 (opens new window)。使用对象时打包正常，但如果想要基于环境进行打包（比如生产环境打包输出依赖分析，以及去除console等），则要使用函数写法。当使用函数写法时，就出现了上面的tailwindcss的自定义class的问题。