Laravel Breeze: Upgrade Tailwind 3 to Tailwind 4

When you create a new Laravel project with a Laravel Breeze starter kit, it comes with Tailwind CSS version 3. But it would be great to upgrade to Tailwind version 4. And it's really easy with the Tailwind upgrade tool.

Your project will be upgraded after running the npx @tailwindcss/upgrade command.

The upgrade tool requires Node.js 20 or higher, so ensure your environment is updated before running it.

The main things the upgrade tool does:

  • Goes through all files and replaces renamed and deprecated utility classes
  • Removes the tailwind.config.js file and moves everything to the resources/css/app.css
  • Migrates PostCSS configuration
  • Updates all packages

After completing the upgrade, remember to run npm run dev or npm run build to see the changes. As the tool says, verify all changes before committing.

Optionally, you can also migrate to a vite plugin instead of using PostCSS. First, install the vite plugin.

npm install @tailwindcss/vite

Next, configure vite.

vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';
 
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
tailwindcss(),
],
});

You can delete the postcss.config.js file and remove the postcss package.

npm uninstall postcss
avatar
Luis Antonio Parrado

This detail is missing: in views/components/drowpdown.blade.php change in the line

<div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}">

ring-black for ring-black/5 and delete the class ring-opacity-5 because ring-opacity-* is deprecated and deleted in Tailwind 4.

This line should look like this:

<div class="rounded-md ring-1 ring-black/5 {{ $contentClasses }}">

Otherwise there is a black border around the dropdown menu which doesn't look good.

avatar

Upgrade tool of course can have bugs. You should report that then and they fix it.

avatar
Luis Antonio Parrado

I've encountered an issue with this update to TailwindCSS 4. The modal appears with a gray background after the animation. I'd like to know where the incompatibility lies.

Before (Tailwind 3)

After (Tailwind 4)

This issue appears as in blade like in Vue (inertia).

In fact the modal is not working correctly after updating to TailwindCSS 4.

avatar

Should check manually which classes didnt change and change

avatar
Luis Antonio Parrado

After reviewing the tailwind classes I finally found a solution, because if anyone else has the same problem.

In the component modal that is structured as

<dialog>
    <div>
		<div></div> <!-- div1: Contains modal backdrop -->
			
		<div> <!-- div2: Contains slot  -->
		    <slot />
		</div>
    </div>
</dialog>

(in addition to both div's being wrapped in transitions.)

  • The div1 has the class absolute to be positioned in whole page.
  • But the div2 has not the class relative, and this seems to be a problem in Tailwind 4 (but I don't know why it isn't with Tailwind 3)
Conclusion

The problem is solved by adding the class relative to div2

Like our articles?

Become a Premium Member for $129/year or $29/month
What else you will get:
  • 76 courses
  • 94 long-form tutorials
  • access to project repositories
  • access to private Discord

Recent New Courses