in this section we will install & setup tailwindcss 3 in laravel 9 & 8. For this tutorial tailwind v3 work both laravel 8 & laravel 9. There is 3 way we can install tailwindcss in laravel. let see.
Step 1: Install Tailwind CSS 3 in laravel from scratch
Create Laravel Project
composer create-project --prefer-dist laravel/laravel my-project
Install tailwind v3
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Setup larvel Mix configuration to add tailwindcss
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
]);
Set your template paths
tailwind.config.js
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
Add the Tailwind directives to your app.css
./resources/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Now, test tailwind css code.
welcome.blade.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div class="container mx-auto">
<h1 class="text-2xl font-bold ">
Install Tailwind CSS 3 In
<span class="text-red-600">
Laravel
</span>
</h1>
</div>
</body>
</html>
npm run watch
# or
npm run dev
Run the project
php artisan serve
Step: 2 Install Tailwind CSS 3 in laravel using laravel breeze (recommended)
Create Laravel Project
composer create-project --prefer-dist laravel/laravel my-project
Connect with database
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password
Install laravel breeze via composer
composer require laravel/breeze --dev
run below command publish config file
php artisan breeze:install
install & run npm
npm install && npm run dev
run below command to migrate
php artisan migrate
Check you package.json
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@tailwindcss/forms": "^0.4.0",
"alpinejs": "^3.4.2",
"autoprefixer": "^10.1.0",
"axios": "^0.25",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.2.1",
"postcss-import": "^14.0.1",
"tailwindcss": "^3.0.0"
}
}
you can see tailwind v3 is there.
Step 3: Install Tailwind CSS 3 in laravel using Jetstream
Create Laravel Project
composer create-project --prefer-dist laravel/laravel my-project
Connect with database
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password
Install jetstream via composer
composer require laravel/jetstream
Install Jetstream With Livewire
php artisan jetstream:install livewire
php artisan jetstream:install livewire --teams
install & run npm
npm install && npm run dev
run below command to migrate
php artisan migrate
Check you package.json
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@tailwindcss/forms": "^0.4.0",
"@tailwindcss/typography": "^0.5.0",
"alpinejs": "^3.0.6",
"axios": "^0.25",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"postcss-import": "^14.0.1",
"tailwindcss": "^3.0.0"
}
}
