Upgrade Guide

Introduction

Not sure what's new or what has changed? Don’t worry! You can find all the updates in Release v2.

Getting Started

Upgrading from Tailwind v3 to v4

Upgrading from Tailwind v3 to v4 involves different steps depending on your setup. If you’re using Vite, you’ll need the @tailwindcss/vite plugin. For PostCSS, you’ll need the @tailwindcss/postcss plugin. It’s highly recommended to check out the official Tailwind v4 guide.

Ready? Let’s dive in! We’ll start with Vite.

Vite

Install the latest version of Tailwind and the Vite plugin:

npm install tailwindcss@next @tailwindcss/vite@next

Next, update your vite.config.ts file to include the plugin:

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

PostCSS

If you’re using Next.js, you’ll likely use PostCSS. To get started, install the latest versions of Tailwind and the PostCSS plugin:

npm install tailwindcss@next @tailwindcss/postcss@next

Then, update your postcss.config.js file to include the plugin:

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

After updating your setup, you can now remove your tailwind.config.ts file.

Updating CSS and Primitives

Tailwind 4 introduces OKLCH color spaces, which we also adopt. Update your main CSS file (e.g., app/globals.css) and your primitives file (ui/primitive.tsx) as shown below:

Looking for custom themes? Head over to our theme customization page to tweak it however you like.

Justd v2 Schema

Open your justd.json file and update it to the latest schema:

Hooks and Classes

The use-media-query hook now resides in the utils/ folder. Additionally, all components now utilize the cn() function from utils/classes.ts. Ensure you have these updated files:

Checking Differences

To see what has changed, run the following command:

When prompted, press a to apply updates to all existing components.

Conclusion

That’s it! You’re now ready to use Justd v2. If you have any questions, feel free to reach out on Twitter.