Upgrade Guide

TailwindCSS v4 brought a lot of new features and improvements. However, it also introduced some breaking changes that may affect your project. In this guide, we will cover the most important changes and how to fix them.

There are two ways to update your project. The first one is to update an automatic tool. The second one is to update manually. We recommend using the automatic tool, but if you prefer to do it manually, we will provide you with all the necessary information.

Upgrade with automatic tool

In most cases, we would recommend to use the automatic tool by TailwindCSS development team. All you need is to enter the following code into your terminal:

$ npx @tailwindcss/upgrade

The upgrade tool automates the entire migration process, including updating your dependencies, migrating your configuration file to CSS, and handling any changes to your template files. Please check here for more details: TailwindCSS Upgrade Tool.

Upgrade manually

Since the SportyBlocks components are heavily based on TailwindCSS, we recommend to check the official upgrade guide for TailwindCSS. You can find it here: TailwindCSS Manual Upgrade Guide.

Please note, TailwindCSS v4 allows you to use your TailwindCSS configuration file tailwind.config.js. However, we highly recommend to use CSS to set SportyBlocks colors. You can find the CSS variables here.