Vue CLI TailWind： CSS变量主题

Question

以下设置按预期在上运行：

yarn serve

但是，它没有将自定义主题varaiable添加到生成的CSS文件中：

yarn build

项目\src\assets\tailwind。css

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components { [...] }
@layer base {
  :root{
   --color-text-title: 0, 0, 0;
   [...]
  }
  .theme-customOne{
   --color-text-title: 0, 255, 0;
   [...]
   }
  .theme-customTwo{
   --color-text-title: 0, 0, 255;
   [...]
   }
}

项目\tailwind.config.js

  function withOpacity(variableName) {
    [...]
  }

  module.exports = {
    purge: { content: ["./public/**/*.html", "./src/**/*.vue"] },
    darkMode: false,
    theme: {
     extend: {
      textColor: {
        skin: {
          title: withOpacity("--color-text-title"),
          [...]
        }
      }
     }
   }
  }

项目\dist\css\index。cae56bc4。css

 :root{
  --color-text-title: 0, 0, 0;
  [...]
 }

问：作为构建过程的一部分，有没有办法在生成的CSS文件中获取特定于主题的CSS变量？

Answer 1

我自己想出来的。解决方案是将要保留的自定义类添加到tailwind中。配置。我喜欢这样：

module.exports = {
 purge: {
  content: ["./public/**/*.html", "./src/**/*.vue"],
  safelist: ["theme-customeOne", "theme-customTwo"]
},
[...]
}

之后，您可以运行：

yarn build

如果您现在检查生成的CSS，例如project\dist\CSS\index。cae56bc4。css您将在该文件中找到自定义类自定义css变量。

我与大家分享我的解决方案，以防它可能对其他遇到此问题的人有所帮助。