Tailwind CSS is a popular utility-first CSS framework that provides a highly efficient and flexible way to build user interfaces.
Step 1: Install Laravel
composer create-project laravel/laravel TailwindProject
Step 2: Install Tailwind CSS
Now We install tailwind css with dependency and create tailwind.config.js file. so run below command,
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Step 3: Configure Template Path
Here, open tailwind.config.js file and add path there:
tailwind.config.js
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
Step 4: Add Tailwind with Laravel mix
Here, open webpack.mix.js file and add lines there:
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"),
]);
Step 5: Add Tailwind CSS in app.css file
resources/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 6: Install npm and Build
Run "npm install" command and then build it with "npm run watch" command:
npm install
Build npm process:
npm run watch
Step 7: Use Tailwind CSS in App
Add code below in blad file,
resources/views/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 px-10">
<h1 class="text-3xl font-bold underline">
How to Install Tailwind CSS in Laravel - webthestuff.com
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat ncupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
Run Your Project and see the output in Your Browser,Thank You.
One is Another Way To Use Tailwind CSS using Breeze See the Below Steps,
Step 1: Install Laravel
composer create-project laravel/laravel TailwindProject
Step 2: Install Breeze
composer require laravel/breeze --dev
install laravel breeze for simple auth scaffolding.
php artisan breeze:install
run bellow command for install npm:
npm install && npm run dev
Run your project and see output.
Third Way,Tailwind CSS using Jetstream
Step 1: Install Laravel
composer create-project laravel/laravel TailwindProject
Step 2: Install Jetstream
Now, in this step, we need to use composer command to install jetstream, so let's run bellow command and install bellow library.
composer require laravel/jetstream
Step 3: Create Auth with Livewire
php artisan jetstream:install livewire
OR
php artisan jetstream:install livewire --teams
Now, let's node js package:
npm install
let's run package:
npm run dev
