Hyas & Tailwind CSS

[pensivedog]

Has anybody successfully set up Hyas to work with Tailwind CSS? I'd love to incorporate the dev tools and other elements from hugo-tailwindcss-starter-theme, but this calls for setting up a new package.json in the theme folder with a lot of overlap with packages already installed in Hyas.

If anyone could provide steps on how they made this or something similar work, I'll be very grateful!

[h-enk]

Just started working on this – you triggered me earlier 😉

It should be fairly simple now (with the new Hyas setup, the just released v1.0.3 of create-hyas, and the great setup of Dirk).

Will get back to you!

[h-enk]

Got it working /set up 🚀 Just making it a little more robust and running some more tests before releasing it.

[pensivedog]

Amazing! Can't wait to see the release :)

[h-enk]

OK, I finally found the time to finish this 🎉

• Official starter: tailwindcss-starter
• Official integration: tailwindcss

Included are the latest versions of:

• tailwindcss
• @tailwindcss/aspect-ratio
• @tailwindcss/forms
• @tailwindcss/typography

Note that @tailwindcss/line-clamp is included in tailwindcss

I mainly based it on bep/hugo-starter-tailwind-basic but also took note of dirkolbrich/hugo-tailwindcss-starter-theme.

I kept the starter basic (so not adding the dev tools and other stuff from the latter repo) to serve a wider range of use cases. If you'd like to, you could include the dev tools and other stuff in ./themes/my-tailwindcss-theme/layouts/

Further documentation is in the making.

[pensivedog]

Wow, this is wonderful! Just tried and it seems to work like a charm. Thank you again for your brilliant work on this project!

[pensivedog]

Trying to get DaisyUI working with the Hyas/Tailwind setup. Following the setup instructions for use as a Tailwind plugin doesn't work, although it works fine from the CDN.

Is there some additional step needed to make Tailwind plugins like this work with Hyas?

[h-enk]

Did you add a corresponding mount? See also https://github.com/gethyas/tailwindcss#setup

[pensivedog]

I tried but I think I'm missing something. The following mounts aren't working:

module.toml:

[[mounts]]
  source = "node_modules/daisyui/dist"
  target = "assets/css"

[[mounts]]
  source = "node_modules/daisyui/dist"
  target = "assets/js"

Is this not the correct approach?