Laravel 12 + React.js + TailwindCSS Installation in 2025: The Ultimate Guide
Kritim Yantra
Jun 27, 2025
Are you ready to build a modern, high-performance web application in 2025? Laravel 12 brings exciting new features, React.js ensures a dynamic frontend, and TailwindCSS makes styling a breeze.
Whether you're a beginner or an experienced developer, this guide will walk you through setting up a fresh Laravel 12 project with React.js and TailwindCSS—step by step.
Let’s dive in!
🔧 Prerequisites
Before we begin, make sure you have:
✔ PHP 8.3+ (Laravel 12 requires it)
✔ Composer (for PHP dependencies)
✔ Node.js 20+ (for React & Tailwind)
✔ MySQL/PostgreSQL (or any preferred database)
💡 Pro Tip: If you're unsure about versions, run:
php -v composer -v node -v npm -v
🛠 Step 1: Install Laravel 12
Laravel 12 introduces faster performance, improved syntax, and better tooling. Let’s create a new project:
composer create-project laravel/laravel laravel-react-tailwind
cd laravel-react-tailwind
This sets up a fresh Laravel installation.
⚛ Step 2: Install React.js with Vite
Laravel no longer uses Mix by default—Vite is now the standard for frontend tooling.
Install React & Vite Dependencies
npm install react react-dom @vitejs/plugin-react
npm install --save-dev vite laravel-vite-plugin
Configure Vite (vite.config.js)
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.jsx',
refresh: true,
}),
react(),
],
});
Update resources/js/app.jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './components/App';
const root = createRoot(document.getElementById('app'));
root.render(<App />);
Create a Sample React Component (resources/js/components/App.jsx)
export default function App() {
return (
<div>
<h1>Hello from Laravel + React!</h1>
</div>
);
}
Update Blade Template (resources/views/welcome.blade.php)
Replace the default view with:
<!DOCTYPE html>
<html>
<head>
@viteReactRefresh
@vite(['resources/js/app.jsx'])
</head>
<body>
<div id="app"></div>
</body>
</html>
Run the Dev Server
npm run dev
Visit http://localhost:8000—you should see your React app!
🎨 Step 3: Install & Configure TailwindCSS
TailwindCSS makes styling effortless with utility classes.
Install TailwindCSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Configure tailwind.config.js
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.jsx",
],
theme: {
extend: {},
},
plugins: [],
}
Add Tailwind to CSS (resources/css/app.css)
@tailwind base;
@tailwind components;
@tailwind utilities;
Update Vite Config to Include CSS
Modify vite.config.js:
input: ['resources/js/app.jsx', 'resources/css/app.css'],
Use Tailwind in React
Update App.jsx:
export default function App() {
return (
<div className="p-8 bg-gray-100 min-h-screen">
<h1 className="text-3xl font-bold text-blue-600">
Hello from Laravel + React + Tailwind!
</h1>
</div>
);
}
Restart Vite
npm run dev
Now, your app should have Tailwind styling!
🚀 Bonus: Optimizing for Production
Before deploying:
npm run build
php artisan optimize
This generates minified and optimized assets.
🔑 Key Takeaways
✅ Laravel 12 + React + TailwindCSS is a powerful stack for 2025.
✅ Vite is now the default frontend bundler (replacing Mix).
✅ React.js integrates seamlessly with Laravel using @vitejs/plugin-react.
✅ TailwindCSS simplifies styling with utility-first classes.
🎉 What’s Next?
Now that your setup is ready:
- Build a full-stack CRUD app
- Add authentication (Laravel Breeze/Fortify)
- Explore Livewire 4.0 for reactive PHP components
Happy coding! 🚀
Got questions? Drop them in the comments! 👇
Comments
No comments yet. Be the first to comment!
Please log in to post a comment:
Sign in with GoogleRelated Posts
Kritim Yantra
Kritim Yantra
Kritim Yantra