Mar 03, 2023
.
Admin
Hi friends,
This tutorial is focused on example of How to install tailwind css in laravel 10?. we will help you to give example of install tailwindcss on a fresh laravel 10 install. you can understand a concept of step by step how to install Tailwind css In Laravel 10. it's simple example of Tailwind css in laravel 10.
There are many ways to install Tailwindcss on a fresh Laravel 10 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 10
<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 10
