search

bep / hugo-starter-tailwind-basic

A basic and simple to set up Hugo with TailwindCSS starter project.
https://lucid-nightingale-60a4e2.netlify.app/
MIT License
144 stars 32 forks source link

Styles in /public/css not being applied, and can't use [&>*] class #15

Closed dinesh-58 closed 1 year ago

dinesh-58 commented 1 year ago

Styles get applied in localhost:1313but don't when I open the final index.html file inside public. The link tag in this file is as follows:

    <link href="/css/styles.min.52e3ba9573dbb62854822e4cadded642295dfdff0ce8c8908db7921c22e87145.css" rel="stylesheet" />

The path and file name are accurate. I also tried removing the numbers from the filename (I'm guessing these are added to prevent caching?) & updating the href but still no styles are being applied.

I was wondering if this might be also causing my 2nd problem. Since tailwind v3.1, you can use [&>*] as a sort of selector to apply tailwind classes to an element's children. Here's a working example that uses v3.3.3: https://play.tailwindcss.com/rq8YVDB3LG

This doesn't work when used in the starter template though. I ran npm list tailwindcss to check the installed version & got this:

hugo-starter-tailwind-basic@0.1.0 /home/sujal/programming/client-work/hugo-kamana-treks
├─┬ @tailwindcss/typography@0.5.9
│ └── tailwindcss@3.3.2 deduped
└── tailwindcss@3.3.2

Does the "tailwindcss": "^2.2.7" in package.hugo.json affect this? [&>*] works fine when I test it in a non-hugo project using the tailwind v3.3.3 binary. I tried updating tailwind inside the template to 3.3.3 as well but to no avail

Edit: Forgot to say that both the index.html & styles.css files in public don't have the [&>*] class

dinesh-58 commented 1 year ago

Update: So it seems it doesn't matter if public/index.html has the applied styles or not. I tested deploying my site on netlify & all the styles were applied fine. I have another site made with hugo and its styles also aren't fully applied to public/index.html. The live site is fine though. So the only remaining problem is the tailwind class one.

bep commented 1 year ago

The gist of the [&>*] issue is probably this isn't picked up by Hugo's HTML collector (e.g. hugo_stats.json). But if you add your layout folder (with a proper Glob pattern) to the list in here, it should work:

https://github.com/bep/hugo-starter-tailwind-basic/blob/master/tailwind.config.js#L4

I would appreciate if you could take further questions on https://discourse.gohugo.io/ -- I get a little overloaded with Hugo questions in all channels.