10-Apr-2023
.
Admin
Hi friends,
This tutorial is focused on the example of How to install tailwind css in laravel 9. we will help you to give an example of install tailwindcss on a fresh laravel 9 install. This article will give you a simple example of step-by-step how to install Tailwind CSS In Laravel 9 . you can understand the concept of Tailwind css in laravel 9.
There are many ways to install Tailwindcss on a fresh Laravel 9 install. You can configure your application by yourself or use a Preset to do it faster. We'll start with the custom one, and skip to the end to check available presets.
Tailwind CSS is a utility-first-based CSS framework and it is the best framework for full-stack developers because of its ease of use and customer satisfaction.
Download Laravel
Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.
composer create-project laravel/laravel example-app
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="text-center mt-10">
<h1 class="text-2xl font-bold">
Install Tailwind CSS 3 In Laravel 9
<br>
<span class="text-red-600">
<h2 class="text-3xl">Nicesnippest.com</h2>
</span>
</h1>
</div>
</body>
</html>
Output:
After run this command:
npm run watch
# or
npm run dev
Run Laravel App:
All steps have been done, now you have to type the given command and hit enter to run the laravel app:
php artisan serve
Step: 2 Install Tailwind CSS 3 in laravel using laravel breeze
Create Laravel Project
composer create-project laravel/laravel laravel-tailwind-breeze
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 laravel/laravel laravel-tailwind-Jetstream
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"
}
}
I hope it can help you...
#Laravel 9