Utilities layer in theme

Using Themes
1

I am trying to use a tailwind library within my own theme. If I build the css from the root of the project it works fine, but when buried beneath themes/[theme-name] it comes up short by ~1200 lines.
I have used both postcss and tailwind cli successfully at project root and unsuccessfully theme deep.

{ 
  "dependencies": {
    "@tailwindcss/cli": "^4.1.6",
    "@tailwindcss/postcss": "^4.1.7",
    "@tailwindcss/typography": "^0.5.16",
    "postcss-cli": "^11.0.1",
    "tailwindcss": "^4.1.7"
  }
}
2

I doubt, someone can point you in the right location with just that snippet from your package file.

If I where you I would elaborate on some details: see: Requesting Help

3

@irkode is right (as usual), but from your description I’m guessing you’re not using Hugo’s built in support for this: css.TailwindCSS

And that works great, and should be eqvuicalent to what you’re trying to do.

1 Like
4

Thank you both; I was not expecting a solve, but sure there is something I am overlooking.

to be more explicit: the theme I originally tried seemed to be well and good w/ (less than the above) packages and a very simple postcss.config.mjs:

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

and because it has been one of those weeks, I somehow missed the script call

{ 
  "scripts": {
    "build:css": "npx @tailwindcss/cli -i assets/css/styles.css -o assets/css/compiled/main.css"
  }
}

The detail that still eludes me, and I will be working on this tonight, is that

  • it works as expected as a part of my project /
  • but (referenced in hugo.yaml as theme: [whatever]), it compiles something pathetically shy of running the exact same commands under /

short term, this matters little as I remain elated that it both builds and [gitub | gitlab] pages deploys successfully.

in all cases my public/ dir references the css yet the only distinct change (outside of whatever I am missing) is moving

from themes/whatever to /

  • assets/css/styles.css
  • layouts/_default/{baseof,single}.html
  • layouts/partials/{css,head,scripts}.html
  • layouts/index.html

my copied css.html

{{- if and (not hugo.IsProduction) (eq hugo.Environment "theme") }}
  {{- $styles := resources.Get "css/styles.css" }}
  {{- $styles = $styles | postCSS (dict "inlineImports" true) }}
  <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
{{- else }}
  {{- $styles := resources.Get "css/compiled/main.css" -}}

  {{- if hugo.IsProduction }}
    {{- $styles = $styles | minify | fingerprint }}
    <link rel="preload" href="{{ $styles.RelPermalink }}" as="style" integrity="{{ $styles.Data.Integrity }}" />
    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" integrity="{{ $styles.Data.Integrity }}" />
  {{- else }}
    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
  {{- end }}
{{- end }}


<!-- Custom CSS -->
{{- $custom := resources.Get "css/custom.css" }}
{{- if hugo.IsProduction -}}
  {{- $custom = $custom | minify | fingerprint }}
  <link href="{{ $custom.RelPermalink }}" rel="stylesheet" integrity="{{ $custom.Data.Integrity }}" />
{{- else }}
  <link href="{{ $custom.RelPermalink }}" rel="stylesheet" />
{{- end }}