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.

[sakonn]

Hello, I was trying to implement a custom partial for Google Analytics because we must have user consent via a cookie banner before analytics is loaded into the browser. So I am trying to style the banner with classes which are not in the main.css bundle out of the box. And some classes are not bundled there even when used in an HTML template.

I have configured Hugo stats in my configuration:

build:
  buildStats:
    enable: true
    disableIDs: true
  cachebusters:
    - source: assets/watching/hugo_stats\.json
      target: styles\.css
    - source: (postcss|tailwind)\.config\.js
      target: css
    - source: assets/.*\.(js|ts|jsx|tsx)
      target: js
    - source: assets/.*\.(.*)$
      target: $1

module:
  mounts:
    - source: assets
      target: assets
    - source: hugo_stats.json
      target: assets/watching/hugo_stats.json

I have quite simple banner template:

<div class="border border-gray-200 bg-white text-gray-700
    dark:border-neutral-800 dark:bg-neutral-900 dark:text-gray-200
    md:rounded-lg z-10 fixed min-h-36 bottom-0 left-0 md:bottom-3 md:left-3 p-4 w-full md:w-96
    hidden"
    id="cookie-notice">
  <div class="leading-7 mt-2 mb-2">
    {{ i18n "cookieDesc" }}
  </div>
  <div class="mt-5 flex flex-row flex-wrap justify-end items-end">
    <button class="py-3 px-4 relative -ml-2 whitespace-nowrap p-2 font-medium" type="button" id="cookie-notice-deny">{{ i18n "cookieDecline" }}</button>
    <button class="py-3 px-4 relative -ml-2 whitespace-nowrap p-2 hover:text-gray-800 dark:hover:text-gray-200 btn-pri nav-btn" type="button" id="cookie-notice-accept">{{ i18n "cookieAccept" }}</button>
  </div>
</div>

The generated hugo_stats.json does contain all the classes but the main.css output does not contain them so the styling is not working as expected. For example md:w-96, min-h-36, md:rounded-lg classes are not present.

main.css
hugo_stats.json

[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

[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 ;)