Vue CLI + Tailwind: Theming with CSS Variables

The setup below works as expected on:

yarn serve

However it does not add the custom theme varaiables to the generated CSS file on:

yarn build

Setup:

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

Output:

project\dist\css\index.cae56bc4.css

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

Is there a way to get the theme specific CSS Variables in the generated CSS file as part of the build process?

I figurd it out by myself. The solution is to add the custom classes you would like to preserve to your tailwind.config.js like so:

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

After that you can run:

yarn build

If you now check the generated CSS e.g. project\dist\css\index.cae56bc4.css you will find the custom class + custom CSS variables inside that file.

I share my solution in case it might be helpful to anyone else who will come across this issue.