Install Tailwind 4 in a Laravel 11 project

When you set up a fresh Laravel 11 project, you may notice it comes with Tailwind CSS 3.x by default. For those looking to upgrade to the latest Tailwind CSS 4, we’ve prepared this guide. These instructions also work for existing projects. If you encounter any issues, feel free to reach out via email: [email protected].

# Steps to Install Tailwind 4 in Laravel 11

1. Ensure Node Modules are installed

After installing a fresh Laravel project, you need to install the required node modules. Run:

npm install

2. Initialize a Git repository

Your Laravel project must have a Git repository initialized. For a new Laravel project, you can simply run:

git init

3. Run the Tailwind upgrade command

Once you have the node_modules directory in your project, run the following command:

npx @tailwindcss/upgrade@next

• This command will:
  • link your tailwind.config.js file to the appropriate stylesheets
  • migrate your JavaScript configuration, templates, stylesheets, and PostCSS configuration
• if your working directory has uncommitted changes, you may need to add the --force flag to the command:

npx @tailwindcss/upgrade@next --force

4. You’re Done! 🎉

These instructions were prepared and tested using the latest, clean Laravel 11 project.

Useful Links

• Tailwind CSS Upgrade Guide
• Tailwind CSS Installation Guide for Laravel with Vite

Enjoy building with Tailwind CSS 4 in your Laravel 11 project! 🚀