Vue CLI + Tailwind：使用 CSS 变量进行主题化

Question

Vue CLI + Tailwind：使用 CSS 变量进行主题化

下面的设置按预期工作：

yarn serve

但是它不会将自定义主题变量添加到生成的CSS文件中：

yarn build

设置：

project\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;
   [...]
   }
}

project\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"),
          [...]
        }
      }
     }
   }
  }

输出：

project\dist\css\index.cae56bc4.css

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

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

Answer 1

我自己想出来的。解决方案是将您想要保留的自定义 classes 添加到您的 tailwind.config.js 中，如下所示：

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

之后你可以运行:

yarn build

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

我分享我的解决方案，以防它对其他遇到的人有所帮助这个问题。

Vue CLI + Tailwind：使用 CSS 变量进行主题化

Vue CLI + Tailwind: Theming with CSS Variables

theming

css-variables

vue-cli

tailwind-css

Vue CLI + Tailwind：使用 CSS 变量进行主题化

设置：

输出：