How do I make Tailwind working?

[skylightsai]

So I am overriding/changing styles of pages eg. ./layouts/blog/list.html (my site's root, NOT inside themes/hextra/layouts) but the new Tailwind style classes are not being reflected on my site.

To clarify: the existing Tailwind classes that comes with the theme are working out-of-the-box - but the classes I am adding are not.

How do I force Tailwind to refresh css so that it includes the styles of the classes?

Looks like the command hugo server does not run alongside with Tailwind watch process? Am I missing something?

[imfing]

How Tailwind CSS classes work in Hextra is that - the classes are pre-compiled via PostCSS to assets/css/compiled/main.css. When using the theme, the compilation process wouldn't kick in.

In your case, if you are running Tailwind watch process, i.e. the npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch, what you can do is setting the output directory under your static folder.
Then, you could include the compiled CSS file in Custom Scripts | Hextra. Let me know if you have any questions.

[jgillich]

Also ran into the issue that Tailwind overrides theme styles. But what works for me is to simply use the JS

<script src="https://cdn.tailwindcss.com"></script>

This isn't deal for production. but better than nothing 😄

Edit: Just noticed this breaks styling in light mode. Too bad

Out of the box tailwind support would be sweet, I kinda expected that because the theme advertises using Tailwind

[jeddchoi]

@imfing I also would be grateful if you offer some guide to use tailwind css without modifying theme files.

[imfing]

Thank you all for the feedback @jgillich @jeddchoi @sakonn

I have a PR to add prefix to all Hextra's Tailwind utility classes, making it more seamless to use standard Tailwind CSS in your own project.

For example, out-of-the-box components can be copied as-is:

it would give us:

this is gonna unlock a lot of potential. I will figure out an elegant way to enable the production build from user side.

[imfing]

The latest main branch should have this change now, you could test it out by using the latest version:

hugo mod get -u github.com/imfing/hextra@main

[sakonn]

Thanks for the implementation. I updated the template to the latest version, and custom styling works fine now. Thank you very much. 🔝 🔝

[jeddchoi]

@imfing Hi, I found the official reference and sample project by creator of Hugo about using Tailwind CSS and Hugo.
I hope it would be helpful.

https://gohugo.io/getting-started/configuration/#configure-cache-busters
https://github.com/bep/hugo-starter-tailwind-basic

[imfing]

thanks, that's how this project has been set up ;)