Add CSS file to _baseof layout

support
1

I’m working on my personal site right now, setting up TailwindCSS, and I can’t figure out how to add the outputted CSS file (from tailwind) to my layouts/_default/baseof.html file so the CSS will render correctly.

My setup is a heavily modified hugo-bearblog theme that I’m now trying to add tailwindcss to. TailwindCSS outputs a CSS file to themes/hugo-bearblog/assets/style.css. Then, in themes/hugo-bearblog/layouts/_default/baseof.html, I have this line:

  <link rel="stylesheet" href="../../assets/style.css"/>

Unfortunately, this is not working: none of the tailwind styling I add actually shows up in the code. I’ve checked that tailwind is compiling correctly; the classes I am adding into my code are showing up in the style.css.

Is there some sort of templating function I need to run to add the style.css? Or what else can I try/do. Thank you!

2

to load assets you will have to look out for global resources

Your style.css is in the root directory of your themes asset folder, no need to fiddle with ‘…’

{{- with resources.Get "style.css" }}
   <link rel="stylesheet" href="{{ .RelPermalink }}" />
{{- end -}}
global resource

A file within the assets directory, or within any directory mounted to the assets directory. Capture one or more global resources using the resources.Get, resources.GetMatch, resources.Match, or resources.ByType functions.

for more complex resource handling see Resource functions and Hugo Pipes

3

I would urge you to look at Bep’s Tailwind starter template and implement it into your own project.