Skip to content

Hyvä CSS - Fallback Utilities

The @hyva-themes/hyva-modules package includes css/fallback.css, which re-adds deprecated Tailwind v2 and v3 utilities that were removed in Tailwind v4. These are included to keep third-party Hyvä-compatible modules working if they still reference the old utility names.

Safe to keep in your build

Tailwind v4 only includes utilities that are actually used in your templates. If none of these classes appear in your code or any installed module, they won't end up in the final CSS. You don't need to remove this import - it's here purely to provide compatibility for third-party modules that still reference the older class names.

Avoid using these in new code

These utilities exist for backward compatibility only. Prefer the Tailwind v4 equivalents in any new code you write.

Included Utilities

Opacity Utilities

Tailwind v4 dropped the separate *-opacity-* utilities in favor of the slash opacity syntax (e.g. bg-black/50). The following are re-added for compatibility:

Utility Tailwind v4 equivalent
bg-opacity-{value} bg-{color}/{value}
text-opacity-{value} text-{color}/{value}
border-opacity-{value} border-{color}/{value}
divide-opacity-{value} divide-{color}/{value}
ring-opacity-{value} ring-{color}/{value}
placeholder-opacity-{value} placeholder-{color}/{value}

Flex Utilities

Tailwind v4 renamed these to align with the CSS property names:

Utility Tailwind v4 equivalent
flex-shrink shrink
flex-shrink-0 shrink-0
flex-grow grow
flex-grow-0 grow-0

Text and Decoration Utilities

Utility Tailwind v4 equivalent
overflow-ellipsis text-ellipsis
decoration-slice box-decoration-slice
decoration-clone box-decoration-clone