Unable to Load Theme Correctly, CSS Styles Not Applied

support
1

I’m not a very professional user, and this issue might have been mentioned by others before, but I haven’t been able to resolve it myself.

Issue Description

I’m trying to integrate a theme as a Git submodule in my Hugo project, but I’m facing issues. The theme doesn’t load correctly, and the CSS styles are not being applied, causing the page to display improperly.

Followed the official documentation and added the theme as a submodule:

Image

issue

The themes/theme directory was pulled correctly, but the CSS file doesn’t seem to be recognized or compiled by Hugo.
Image

Here’s the content of my styles.css file:

Image

I think this is caused by importing tailwindcss in the css file

version

Hugo Version: hugo v0.147.3-05417512bd001c0b2cc0042dcc584575825b89b3+extended windows/amd64 BuildDate=2025-05-12T12:25:03Z VendorInfo=gohugoio

Theme Version: Latest (pulled via Git submodule)

Operating System: Windows 11

Node.js Version: v22.16.0

2

Is there some reason why you don’t want to follow the theme author’s guidance?

https://github.com/imfing/hextra?tab=readme-ov-file#quick-start

3

in fact, I have followed the author’s opinion. There are two ways to use templates and import as git subbranch. The first method works fine, but I need to modify the theme’s ui, so I switched to the second method before I got an error:

Reference: Getting Started – Hextra

4

You don’t want to do that. Instead, override the theme’s UI by creating a file with the same path in the root of your project directory.

With regard to the author’s documentation for adding the theme as a Git submodule… those instructions will never work. Please raise an issue with the theme author. See https://github.com/imfing/hextra/issues/690.

Follow-up: the submodule instructions were added here, but obviously never tested.