Skip to content

Supported TailwindCSS Versions

Hyvä aims to support the latest stable TailwindCSS release.

Updating TailwindCSS

Updating TailwindCSS isn't always straightforward. We consider several factors, including browser compatibility, before updating.

If you plan to update TailwindCSS in your child theme for a specific feature, consider the following:

  • Is the update necessary? We strive to provide alternative solutions. Remember, TailwindCSS is a tool, and plain CSS might solve your issue.
  • Understand Node and NPM: Updating TailwindCSS can lead to Node script errors. Familiarity with these tools is crucial for debugging.
  • Be aware of potential breaking changes: There's often a reason we haven't updated yet. Minor updates might be simple, but major version jumps can introduce breaking changes.

TailwindCSS v4 (Latest)

Not yet supported!

TailwindCSS v4 introduces greater flexibility for sizing options, improved CSS component extensibility, and the use of CSS variables.

It replaces the JavaScript configuration with a CSS configuration, further aligning it with CSS.

We are actively working on TailwindCSS v4 support but are also awaiting the TailwindCSS team to resolve outstanding issues.
For more information, please join the #tailwind-talk channel on our Slack workspace.

Downgrading from TailwindCSS v4 to v3

If you've unintentionally or intentionally upgraded to TailwindCSS v4 and need to revert to v3, follow these steps:

cd path/to/project/app/design/frontend/Acme/default/web/tailwind
npm install tailwindcss@3

Important Considerations:

  • Preserve package-lock.json: This file is crucial for version management. Do not delete it, as it ensures consistent dependency installations, similar to Composer's composer.lock.
  • Avoid npm install tailwindcss: Typically, manual installation of TailwindCSS is unnecessary. Use npm ci to install dependencies based on your package-lock.json for reliable results.
  • Use npm update <package-name> selectively: Running npm update without specifying a package will update all dependencies, including TailwindCSS. To avoid unintended upgrades, use npm update <package-name> to update specific packages only. This mirrors the best practice of using composer update <package-name> in Composer.

TailwindCSS v3 (Current)

This version enhances TailwindCSS v2 features and fully leverages the JIT compiler, significantly improving the developer experience.

The JIT compiler eliminates the need for @variants configuration, as all variants (and more) are now supported.

Learn more about v3 features at https://v3.tailwindcss.com/.

TailwindCSS v2

This was the first supported TailwindCSS version in Hyvä.
It added support for modern browser features and dropped IE support.

This version was used in Hyvä default theme versions 1.0 and 1.1, and replaced in Hyvä 1.2, with TailwindCSS version 3.

Learn more about v2 features at https://v2.tailwindcss.com/.