fix: pin Tailwind config path + absolute content globs (cwd-independent PostCSS for CI)

tailwind.config.js

@@ -1,41 +1,48 @@
-/**
+/**
- * Tailwind CSS 3.x configuration.
+ * Tailwind CSS 3.x configuration.
- *
+ *
- * Brand colours are wired to CSS custom properties that Hugo injects into
+ * Brand colours are wired to CSS custom properties that Hugo injects into
- * :root from data/brand.yaml (see assets/css/main.css). This means utility
+ * :root from data/brand.yaml (see assets/css/main.css). This means utility
- * classes like `bg-primary` / `text-primary` automatically reflect the brand
+ * classes like `bg-primary` / `text-primary` automatically reflect the brand
- * without any template edits — change data/brand.yaml and rebuild.
+ * without any template edits — change data/brand.yaml and rebuild.
- */
+ */
-/** @type {import('tailwindcss').Config} */
+const path = require("path");
-module.exports = {
+
-  content: [
+/** @type {import('tailwindcss').Config} */
-    "./layouts/**/*.html",
+module.exports = {
-    "./content/**/*.{html,md}",
+  // Resolve content globs absolute to THIS config file's directory so Tailwind
-  ],
+  // scans the right files regardless of the process working directory. Hugo's
-  theme: {
+  // PostCSS pipeline (css.PostCSS) does not always run with cwd = project root
-    extend: {
+  // (notably in CI), and relative globs would then match nothing — producing
-      colors: {
+  // empty CSS and "class does not exist" errors for @apply'd utilities.
-        // Mapped to RGB-channel CSS vars injected from data/brand.yaml so that
+  content: [
-        // Tailwind opacity modifiers (e.g. bg-primary/10) work correctly.
+    path.join(__dirname, "layouts/**/*.html"),
-        primary: "rgb(var(--brand-primary-rgb) / <alpha-value>)",
+    path.join(__dirname, "content/**/*.{html,md}"),
-        secondary: "rgb(var(--brand-secondary-rgb) / <alpha-value>)",
+  ],
-        "primary-contrast": "rgb(var(--brand-primary-contrast-rgb) / <alpha-value>)",
+  theme: {
-      },
+    extend: {
-      fontFamily: {
+      colors: {
-        sans: [
+        // Mapped to RGB-channel CSS vars injected from data/brand.yaml so that
-          "system-ui",
+        // Tailwind opacity modifiers (e.g. bg-primary/10) work correctly.
-          "-apple-system",
+        primary: "rgb(var(--brand-primary-rgb) / <alpha-value>)",
-          "Segoe UI",
+        secondary: "rgb(var(--brand-secondary-rgb) / <alpha-value>)",
-          "Roboto",
+        "primary-contrast": "rgb(var(--brand-primary-contrast-rgb) / <alpha-value>)",
-          "Helvetica",
+      },
-          "Arial",
+      fontFamily: {
-          "sans-serif",
+        sans: [
-        ],
+          "system-ui",
-      },
+          "-apple-system",
-      maxWidth: {
+          "Segoe UI",
-        prose: "72ch",
+          "Roboto",
-      },
+          "Helvetica",
-    },
+          "Arial",
-  },
+          "sans-serif",
-  plugins: [],
+        ],
-};
+      },
+      maxWidth: {
+        prose: "72ch",
+      },
+    },
+  },
+  plugins: [],
+};