getComputedStyle in V4 doesn't contain variables #16612
-
|
I am switching to v4. I'm trying to get access to value defined by variables in the export const getCSSVar = (variableName: string): string => {
const cleanVariableName = variableName.replace(/^var\((.*)\)$/, '$1');
const styles = getComputedStyle(document.documentElement);
const value = styles.getPropertyValue(cleanVariableName).trim();
return value;
};Following the doc https://tailwindcss.com/docs/theme#referencing-in-javascript But nor const tempElement = document.createElement('div');
document.body.appendChild(tempElement);
tempElement.style.setProperty('display', 'none');
const computedStyles = getComputedStyle(tempElement);And I need to create an interpolation of 2 colors from my theme. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
You'd want to call the const cleanVariableName = variableName.replace(/^var\((.*)\)$/, '$1');
-const styles = getComputedStyle(document.body);
+const styles = getComputedStyle(document.documentElement);
const value = styles.getPropertyValue(cleanVariableName).trim(); |
Beta Was this translation helpful? Give feedback.
-
|
didn't work as well, sorry, I tryed too before too folowing the doc. Here the print of |
Beta Was this translation helpful? Give feedback.
-
|
I was dumb issue come from an extra s |
Beta Was this translation helpful? Give feedback.
You'd want to call the
getComputedStyle()with the element that matches:root, i.e.<html>: