In this tutorial, I will share a simple way to install Laravel 11 with Tailwind CSS.
1. Installing Laravel
Before starting the Laravel installation, make sure you have installed PHP 8.2+, Composer, Node.js, and NPM.
If everything is ready, proceed with the installation by running the following command in your terminal:
composer create-project laravel/laravel:^11.0 project-name
Wait for a moment until the installation process is completed. After that, navigate to the newly created project directory by running:
cd project-name
2. Installing Tailwind CSS
Next, install Tailwind CSS by running the following command:
npm install -D tailwindcss postcss autoprefixer
3. Tailwind CSS Configuration
After successfully installing Tailwind CSS, run the following command to generate the Tailwind configuration file:
npx tailwindcss init -p
This command will generate a tailwind.config.js file in your project.
Open the file and modify its content as follows:
export default {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}4. Add Tailwind to CSS
Don't forget to update the content of the resources/css/app.css file to the following:
@tailwind base; @tailwind components; @tailwind utilities;
Finally, add the following directive inside the <head> section of your Laravel Blade file so that Tailwind can be properly used:
@vite(['resources/css/app.css', 'resources/js/app.js'])
This is because Laravel uses Vite to manage and build frontend assets.
Run the following command:
npm run dev
This will start the Vite development server, which will reflect any changes based on the classes you add in real-time.
If you want to deploy your project to hosting, run the following command instead:
npm run build
That’s the tutorial on How to Install Laravel 11 with Tailwind CSS. Hope this helps. Thank you!