Migration from 0.20.X to 0.21.X

To install the latest version of Wasp, open your terminal and run:

curl -sSL https://get.wasp.sh/installer.sh | sh

If you want to install Wasp 0.21.0 specifically, you can pass a version argument to the install script:

curl -sSL https://get.wasp.sh/installer.sh | sh -s -- -v 0.21.0

What's new in 0.21.X?

Better Tailwind CSS support

With this change, we will not require you to upgrade Tailwind CSS in lockstep with Wasp anymore. You can use any version of Tailwind CSS v4 or newer in your Wasp app, and upgrade it (or not) at your own pace.

In previous versions of Wasp, we used a custom way of handling Tailwind CSS configuration files, which tightly coupled us to a specific version. Due to the new Vite installation method in version 4, we can simplify our support, and remove all custom steps. Now Tailwind CSS is just a regular dependency in your Wasp app like any other.

Upgraded to Vitest 4

Wasp has upgraded its testing framework from Vitest 1 all the way to Vitest 4. This brings a lot of improvements, especially in terms of performance and stability. Most users should not notice any breaking changes, but if you have custom test setups or configurations, please refer to the Vitest migration guide for more details.

How to migrate?

To migrate your Wasp app from 0.20.X to 0.21.X, follow these steps:

1. Bump the Wasp version

Update the version field in your Wasp file to ^0.21.0:

main.wasp

app MyApp {
  wasp: {
    version: "^0.21.0"
  },
}

2. Upgrade Tailwind CSS to v4

If you don't have a tailwindcss dependency in your package.json, you can skip this step.

1. Run the Tailwind CSS upgrade tool:

   npx @tailwindcss/upgrade

   It will update any changed classes to the new name, and migrate your config file to the new CSS format.

2. Remove the @tailwindcss/postcss plugin from your postcss.config.js file.

   Before

   postcss.config.js

   export default {
     plugins: {
       '@tailwindcss/postcss': {},
     },
   };

   After

   postcss.config.js

   export default {
     plugins: {},
   };

   If the file is now empty, you can delete it entirely.

3. Uninstall the @tailwindcss/postcss package and install @tailwindcss/vite.

   npm un @tailwindcss/postcss
   npm i -D @tailwindcss/vite

4. Add the @tailwindcss/vite plugin to your vite.config.ts file.

   vite.config.ts

   import tailwindcss from '@tailwindcss/vite';
   import { defineConfig } from 'vite';
   
   export default defineConfig({
     plugins: [
       tailwindcss(),
     ],
   });

5. Find the CSS file with the @import "tailwindcss" directive and add source(".") to it.

   If you used the default starter templates, the file will be src/Main.css or src/App.css. If it is in a different location, adjust the path in source() accordingly, so that it points to your src folder.

   Before

   src/Main.css

   @import "tailwindcss";
   
   /* ... */

   After

   src/Main.css

   @import "tailwindcss" source(".");
   
   /* ... */

If you hit any snags or would like more details, check out the official Tailwind CSS v4 upgrade guide, and our updated Tailwind documentation.

3. Upgrade Vitest tests to v4

If you don't have test files in your project, you can skip this step.

We upgraded our testing support from Vitest v1 to Vitest v4. Most of the breaking changes are related to internal configuration, edge cases, or very advanced usage; so we recommend first to try running your tests after bumping the Wasp version, and only read through the migration guides if you encounter issues:

1. Migration guide from Vitest v1 to v2
2. Migration guide from Vitest v2 to v3
3. Migration guide from Vitest v3 to v4

4. Enjoy your updated Wasp app

That's it!