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