<ahref=https://github.com/jpanther/congo/discussionstarget=_blankrel=noreferrer>GitHub Discussions</a>.</p><h2id=hugo-project-structureclass="relative group">Hugo project structure <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#hugo-project-structurearia-label=Anchor>#</a></span></h2><p>Before leaping into it, first a quick note about
<ahref=https://gohugo.io/getting-started/directory-structure/target=_blankrel=noreferrer>Hugo project structure</a> and best practices for managing your content and theme customisations.</p><divclass="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"><spanclass="pe-3 text-primary-400"><spanclass="relative inline-block align-text-bottom px-1 icon"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><pathfill="currentcolor"d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg></span></span><spanclass=dark:text-neutral-300><strong>In summary:</strong> Never directly edit the theme files. Only make customisations in your Hugo project’s sub-directories, not in the themes directory itself.</span></div><p>Congo is built to take advantage of all the standard Hugo practices. It is designed to allow all aspects of the theme to be customised and overridden without changing any of the core theme files. This allows for a seamless upgrade experience while giving you total control over the look and feel of your website.</p><p>In order to achieve this, you should never manually adjust any of the theme files directly. Whether you install using Hugo modules, as a git submodule or manually include the theme in your <code>themes/</code> directory, you should always leave these files intact.</p><p>The correct way to adjust any theme behaviour is by overriding files using Hugo’s powerful
<ahref=https://gohugo.io/templates/lookup-order/target=_blankrel=noreferrer>file lookup order</a>. In summary, the lookup order ensures any files you include in your project directory will automatically take precedence over any theme files.</p><p>For example, if you wanted to override the main article template in Congo, you can simply create your own <code>layouts/_default/single.html</code> file and place it in the root of your project. This file will then override the <code>single.html</code> from the theme without ever changing the theme itself. This works for any theme files - HTML templates, partials, shortcodes, config files, data, assets, etc.</p><p>As long as you follow this simple practice, you will always be able to update the theme (or test different theme versions) without worrying that you will lose any of your custom changes.</p><h2id=colour-schemesclass="relative group">Colour schemes <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#colour-schemesaria-label=Anchor>#</a></span></h2><p>Congo ships with a number of colour schemes out of the box. To change the basic colour scheme, you can set the <code>colorScheme</code> theme parameter. Refer to the
<ahref=https://jpanther.github.io/congo/docs/getting-started/#colour-schemes>Getting Started</a> section to learn more about the built-in schemes.</p><p>In addition to the default schemes, you can also create your own and re-style the entire website to your liking. Schemes are created by by placing a <code><scheme-name>.css</code> file in the <code>assets/css/schemes/</code> folder. Once the file is created, simply refer to it by name in the theme configuration.</p><p>Congo defines a three-colour palette that is used throughout the theme. The three colours are defined as <code>neutral</code>, <code>primary</code> and <code>secondary</code> variants, each containing ten shades of colour.</p><p>Due to the way Tailwind CSS 3.0 calculates colour values with opacity, the colours specified in the scheme need to
<ahref=https://github.com/adamwathan/tailwind-css-variable-text-opacity-demotarget=_blankrel=noreferrer>conform to a particular format</a> by providing the red, green and blue colour values.</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-cssdata-lang=css><spanclass=line><spanclass=cl><spanclass=p>:</span><spanclass=nd>root</span><spanclass=p>{</span>
</span></span></code></pre></div><p>This example defines a CSS variable for the <code>primary-500</code> colour with a red value of <code>139</code>, green value of <code>92</code> and blue value of <code>246</code>.</p><p>Use one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official
<ahref=https://tailwindcss.com/docs/customizing-colors#color-palette-referencetarget=_blankrel=noreferrer>Tailwind colour palette reference</a>.</p><h2id=overriding-the-stylesheetclass="relative group">Overriding the stylesheet <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#overriding-the-stylesheetaria-label=Anchor>#</a></span></h2><p>Sometimes you need to add a custom style to style your own HTML elements. Congo provides for this scenario by allowing you to override the default styles in your own CSS stylesheet. Simply create a <code>custom.css</code> file in your project’s <code>assets/css/</code> folder.</p><p>The <code>custom.css</code> file will be minified by Hugo and loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.</p><h3id=adjusting-the-font-sizeclass="relative group">Adjusting the font size <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#adjusting-the-font-sizearia-label=Anchor>#</a></span></h3><p>Changing the font size of your website is one example of overriding the default stylesheet. Congo makes this simple as it uses scaled font sizes throughout the theme which are derived from the base HTML font size. By default, Tailwind sets the default size to <code>12pt</code>, but it can be changed to whatever value you prefer.</p><p>Create a <code>custom.css</code> file using the
<ahref=#overriding-the-stylesheet>instructions above</a> and add the following CSS declaration:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-cssdata-lang=css><spanclass=line><spanclass=cl><spanclass=c>/* Increase the default font size */</span>
</span></span></code></pre></div><p>Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than <code>12pt</code>. Similarly, to decrease the font sizes, make the value less than <code>12pt</code>.</p><h2id=building-the-theme-css-from-sourceclass="relative group">Building the theme CSS from source <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#building-the-theme-css-from-sourcearia-label=Anchor>#</a></span></h2><p>If you’d like to make a major change, you can take advantage of Tailwind CSS’s JIT compiler and rebuild the entire theme CSS from scratch. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet.</p><divclass="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"><spanclass="pe-3 text-primary-400"><spanclass="relative inline-block align-text-bottom px-1 icon"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><pathfill="currentcolor"d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg></span></span><spanclass=dark:text-neutral-300><strong>Note:</strong> Building the theme manually is intended for advanced users.</span></div><p>Let’s step through how building the Tailwind CSS works.</p><h3id=tailwind-configurationclass="relative group">Tailwind configuration <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#tailwind-configurationaria-label=Anchor>#</a></span></h3><p>In order to generate a CSS file that only contains the Tailwind classes that are actually being used the JIT compiler needs to scan through all the HTML templates and Markdown content files to check which styles are present in the markup. The compiler does this by looking at the <code>tailwind.config.js</code> file which is included in the root of the theme directory:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-jsdata-lang=js><spanclass=line><spanclass=cl><spanclass=c1>// themes/congo/tailwind.config.js
</span></span></code></pre></div><p>This default configuration has been included with these content paths so that you can easily generate your own CSS file without needing to modify it, provided you follow a particular project structure. Namely, <strong>you have to include Congo in your project as a subdirectory at <code>themes/congo/</code></strong>. This means you cannot easily use Hugo Modules to install the theme and you must go down either the git submodule (recommended) or manual install routes. The
<ahref=https://jpanther.github.io/congo/docs/installation/>Installation docs</a> explain how to install the theme using either of these methods.</p><h3id=project-structureclass="relative group">Project structure <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#project-structurearia-label=Anchor>#</a></span></h3><p>In order to take advantage of the default configuration, your project should look something like this…</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-shelldata-lang=shell><spanclass=line><spanclass=cl>.
</span></span></code></pre></div><p>This example structure adds a new <code>projects</code> content type with its own custom layout along with a custom shortcode and extended partial. Provided the project follows this structure, all that’s required is to recompile the <code>main.css</code> file.</p><h3id=install-dependenciesclass="relative group">Install dependencies <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#install-dependenciesaria-label=Anchor>#</a></span></h3><p>In order for this to work you’ll need to change into the <code>themes/congo/</code> directory and install the project dependencies. You’ll need
<ahref=https://docs.npmjs.com/cli/v7/configuring-npm/installtarget=_blankrel=noreferrer>npm</a> on your local machine for this step.</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-shelldata-lang=shell><spanclass=line><spanclass=cl><spanclass=nb>cd</span> themes/congo
</span></span></code></pre></div><h3id=run-the-tailwind-compilerclass="relative group">Run the Tailwind compiler <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#run-the-tailwind-compileraria-label=Anchor>#</a></span></h3><p>With the dependencies installed all that’s left is to use
<ahref=https://v2.tailwindcss.com/docs/installation#using-tailwind-clitarget=_blankrel=noreferrer>Tailwind CLI</a> to invoke the JIT compiler. Navigate back to the root of your Hugo project and issue the following command:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-shelldata-lang=shell><spanclass=line><spanclass=cl><spanclass=nb>cd</span> ../..
</span></span></code></pre></div><p>It’s a bit of an ugly command due to the paths involved but essentially you’re calling Tailwind CLI and passing it the location of the Tailwind config file (the one we looked at above), where to find the theme’s <code>main.css</code> file and then where you want the compiled CSS file to be placed (it’s going into the <code>assets/css/compiled/</code> folder of your Hugo project).</p><p>The config file will automatically inspect all the content and layouts in your project as well as all those in the theme and build a new CSS file that contains all the CSS required for your website. Due to the way Hugo handles file hierarchy, this file in your project will now automatically override the one that comes with the theme.</p><p>Each time you make a change to your layouts and need new Tailwind CSS styles, you can simply re-run the command and generate the new CSS file. You can also add <code>-w</code> to the end of the command to run the JIT compiler in watch mode.</p><h3id=make-a-build-scriptclass="relative group">Make a build script <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#make-a-build-scriptaria-label=Anchor>#</a></span></h3><p>To fully complete this solution, you can simplify this whole process by adding aliases for these commands, or do what I do and add a <code>package.json</code> to the root of your project which contains the necessary scripts…</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-jsdata-lang=js><spanclass=line><spanclass=cl><spanclass=c1>// package.json
</span></span></code></pre></div><p>Now when you want to work on designing your site, you can invoke <code>npm run dev</code> and the compiler will run in watch mode. When you’re ready to deploy, run <code>npm run build</code> and you’ll get a clean Tailwind CSS build.</p><p>🙋♀️ If you need help, feel free to ask a question on
