Difficulties upgrading to Tailwind CSS v4

[kowyo]

Hi, I want to ask about how to upgrade to Tailwind CSS v4.

Our project is based on Hextra but we have modified some components(html). So https://github.com/imfing/hextra/pull/632 cannot simply be done just by upgrading submodules.

I am not familiar with tailwind css. When I read the upgrade guide in https://tailwindcss.com/docs/upgrade-guide, I think there is a tool that can upgrade existing tailwind css syntax in html files automatically. But it does not upgraded as expected.

As https://github.com/imfing/hextra/pull/632 mentioned, I have also tried to replace hx- with hx:, however, it still breaks. As I observed, syntax like first:hx-mt-0 should be replaced with hx:first:mt-0, this cannot be done just by finding and replacing.

I wonder if changes in html in https://github.com/imfing/hextra/pull/632/files are automatically finished? Is there any convenient ways to achieve this?

Thank you!

Update: already WIP, but it is still broken now

[imfing]

Hi @kowyo I don't think there's easier way to do it. The new version requires the prefix hx: to be in the front, so in the case of first:hx-mt-0 needs to be updated like: hx:first:mt-0.

I asked Claude to summarize the changes based on the hugo_stats.json:

---

1. Modifiers before hx- moved after hx:

   • active:hx- → hx:active:
   • hover:hx- → hx:hover:
   • focus:hx- → hx:focus:
   • before:hx- → hx:before:
   • dark:hx- → hx:dark:
   • group-hover:hx- → hx:group-hover:
   • group-[.copied]/copybtn:hx- → hx:group-[.copied]/copybtn:
   • first:hx- → hx:first:
   • last-of-type:hx- → hx:last-of-type:
   • contrast-more:hx- → hx:contrast-more:
   • group-open:before:hx- → hx:group-open:before:
   • data-[state=selected]:hx- → hx:data-[state=selected]:
   • data-[state=closed]:hx- → hx:data-[state=closed]:
   • data-[state=open]:hx- → hx:data-[state=open]:
   • group-data-[theme=dark]:hx- → hx:group-data-[theme=dark]:
   • group-data-[theme=light]:hx- → hx:group-data-[theme=light]:
   • placeholder:hx- → hx:placeholder:
   • print:hx- → hx:print:

2. Screen size modifiers moved after hx:

   • sm:hx- → hx:sm:
   • md:hx- → hx:md:
   • lg:hx- → hx:lg:
   • xl:hx- → hx:xl:
   • max-sm:hx- → hx:max-sm:
   • max-md:hx- → hx:max-md:
   • max-lg:hx- → hx:max-lg:
   • max-xl:hx- → hx:max-xl:
   • sm:max-lg:hx- → hx:sm:max-lg:

3. Direction modifiers moved after hx:

   • ltr:hx- → hx:ltr:
   • rtl:hx- → hx:rtl:
   • ltr:md:hx- → hx:ltr:md:
   • rtl:md:hx- → hx:rtl:md:

4. Negative classes with -hx- changed to hx:-

   • -hx-mb-0.5 → hx:-mb-0.5
   • -hx-ml-2 → hx:-ml-2
   • -hx-mr-2 → hx:-mr-2
   • -hx-mt-20 → hx:-mt-20
   • ltr:hx--mr-4 → hx:ltr:-mr-4
   • rtl:hx--ml-4 → hx:rtl:-ml-4
   • rtl:-hx-rotate-180 → hx:rtl:-rotate-180

5. Nested modifiers with dark: have been reordered

   • dark:hover:hx- → hx:dark:hover:
   • dark:focus:hx- → hx:dark:focus:
   • dark:contrast-more:hx- → hx:dark:contrast-more:
   • contrast-more:dark:hx- → hx:contrast-more:dark:
   • contrast-more:dark:hover:hx- → hx:contrast-more:dark:hover:

---

You can use above as a reference or maybe create a script to bulk replace.