24-May-2024
.
Admin
Hi, Dev
In this guide, I will show you the steps to install Tailwind CSS in a Laravel 11 application.
Tailwind CSS is a widely-used, open-source utility-first CSS framework that enables developers to quickly create responsive, customizable, and modern user interfaces.
Unlike traditional CSS frameworks that come with pre-designed UI components, Tailwind CSS provides a collection of low-level utility classes that can be applied to any HTML element. These classes are designed to be combined in various ways, allowing you to build complex designs without the need for custom CSS.
In this post, I will demonstrate three different methods to install Tailwind CSS in your Laravel application. The options are listed below:
1) Install Tailwind CSS using npm
2) Install Tailwind CSS using Breeze
3) Install Tailwind CSS using Jetstream
So, let's follow the steps below to install Tailwind CSS in a Laravel application.
1) Install Tailwind CSS using npm
In this step, i will give you list of steps using npm command. so let's follow it.
Step 1: Install Laravel 11
This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:
composer create-project laravel/laravel example-app
Step 2: Install Tailwind CSS
Let's install Tailwind CSS with the dependency and create the tailwind.config.js file. So, run the command below:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Step 3: Configure Template Path
Here, open `tailwind.config.js` file and add the file paths there:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [
],
}
Step 4: Add Tailwind with Laravel mix
Here, open vite.config.js file and add lines there:
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from 'tailwindcss';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
css: {
postcss: {
plugins: [tailwindcss()],
},
}
});
Step 5: Add Tailwind CSS in app.css file
Here, open the app.css file and add lines there:
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 dev
Step 7: Use Tailwind CSS in App
Now, you can use Tailwind CSS in your Blade file as shown below:
resources/views/welcome.blade.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@vite('resources/css/app.css')
</head>
<body>
<div class="container mx-auto px-10">
<h1 class="text-3xl font-bold underline">
How to Install Tailwind CSS in Laravel 11? - NiceSnippets.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>
Let's see below output:
2) Install Tailwind CSS using Breeze
In this step, i will give you list of steps using npm command. so let's follow it.
Step 1: Install Laravel
If have not already setup of laravel application then you can run below command to get fresh laravel app:
composer create-project laravel/laravel example-app
Step 2: Install Breeze
Let's run bellow command to install laravel breeze package by bellow command:
composer require laravel/breeze --dev
Next you have to install laravel breeze for simple auth scaffolding. so let's run bellow command:
php artisan breeze:install
Now let's run bellow command for install npm:
npm install
npm run dev
That's it. you will have setup on tailwind css based.
3) Install Tailwind CSS using Jetstream
In this step, i will give you list of steps using npm command. so let's follow it.
Step 1: Install Laravel
If have not already setup of laravel application then you can run below command to get fresh laravel app:
composer create-project laravel/laravel example-app
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:
now, we need to create authentication using bellow command. you can create basic login, register and email verification. if you want to create team management then you have to pass addition parameter. you can see bellow commands:
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
That's it. you will have setup on tailwind css based.
I hope it can help you...
#Laravel 11
