Resolve issue where leading 0 was being stripped from CSS variables in tailwind v4 alpha

Author: jthrilly

lib/ui/utils/CSSVariables.js

@@ -3,7 +3,9 @@ import { isEmpty } from 'es-toolkit/compat';
 const CSSVariable = (variableName) => {
   if (document.readyState !== 'complete') {
     // eslint-disable-next-line no-console
-    // console.error('You attempted to read the value of a CSS variable before all app resources were loaded! Move calls to getCSSVariableAs* outside of the top level scope of your components.');
+    // console.error(
+    //   'You attempted to read the value of a CSS variable before all app resources were loaded! Move calls to getCSSVariableAs* outside of the top level scope of your components.',
+    // );
   }
 
   const variable = getComputedStyle(document.body)
@@ -20,8 +22,9 @@ const CSSVariable = (variableName) => {
 export const getCSSVariableAsString = (variableName) =>
   CSSVariable(variableName);
 
+// Coerce the CSS variable to a number
 export const getCSSVariableAsNumber = (variableName) =>
-  parseInt(CSSVariable(variableName), 10);
+  parseFloat(CSSVariable(variableName));
 
 export const getCSSVariableAsObject = (variableName) =>
   JSON.parse(CSSVariable(variableName));

next.config.js

@@ -7,7 +7,7 @@ let commitHash = 'Unknown commit hash';
 try {
   commitHash = ChildProcess.execSync('git log --pretty=format:"%h" -n1')
     .toString()
-    .trim()
+    .trim();
 } catch (error) {
   // eslint-disable-next-line no-console
   console.info('Error getting commit hash:', error.message ?? 'Unknown error');

package.json

@@ -111,7 +111,7 @@
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.9",
-    "@tailwindcss/postcss": "4.0.0-beta.3",
+    "@tailwindcss/postcss": "4.0.0-beta.9",
     "@tailwindcss/typography": "^0.5.15",
     "@total-typescript/ts-reset": "^0.6.1",
     "@types/archiver": "^6.0.3",
@@ -139,7 +139,7 @@
     "prettier-plugin-tailwindcss": "^0.6.9",
     "prisma": "^5.22.0",
     "sass": "^1.81.0",
-    "tailwindcss": "4.0.0-beta.3",
+    "tailwindcss": "4.0.0-beta.9",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "5.6.3",
     "vite-tsconfig-paths": "^5.1.2",