Vue CLI + Tailwind: Theming with CSS Variables - tailwind-css

Question

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?

Answer 1

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.