Today we will explain and install Tailwind in Laravel project. The article below will guide you how to install Tailwind CSS in Laravel 9. Before go to installation steps, do you know what is Tailwind? is this necessary to install? what can we do this Tailwind?
You mostly know in web developments Bootstrap is a popular CSS framework, and Tailwind is CSS like Bootstrap but Tailwind has move advantage over Boostrap but it is base on what kind of project you are going to apply with. It is more flexible and more component than Bootstrap. So this is mean Tailwind is new generation of CSS Framework.
There are various ways to install Tailwind CSS
First, I will show you to how to install Tailwind with using npm command as below steps:
If you not download Laravel project yet, try below command to download fresh project and navigate to the project.
composer create-project laravel/laravel LaravelApp
cd LaravelApp
There two tools to compile assets in Laravel app: vite and mix. Basically, by default Laravel 9 come with vite or you can config using mix as well, and I will show you both of them.
►USING Vite
These command below will generate a file in root directory named tailwind.config.js
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
►USING Vite
Then open file tailwind.config.js and add all templates path.
Open file tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
►USING Vite
Add directive tailwind for each layers.
Open file resources -> css -> app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
►USING Vite
Before run below command make sure you have installed Node.js and setup environment variables if you are using Windows OS. Then run npm install command and then build it with npm run watch command
npm install
npm run watch
►USING Vite
Now, you can try tailwind css in blade file see below example:
Open file resources -> views -> layouts -> app.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>
<h1 class="text-3xl font-bold underline">
Happy Coding Laravel
</h1>
</body>
</html>
►USING Laravel Mix
Open your webpack.mix.js and add as below code
Open file webpack.mix.js
const mix = require('laravel-mix');
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
]);
►USING Laravel Mix
Add the paths to all of your template files in your tailwind.config.js file
Open file tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
►USING Laravel Mix
Add directive tailwind for each layers.
Open file resources -> css -> app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
►USING Laravel Mix
Before run below command make sure you have installed Node.js and setup environment variables if you are using Windows OS. See below command
npm install
npm run watch
►USING Laravel Mix
Now, you can try tailwind css in blade file see below example:
Open file resources -> views -> layouts -> app.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>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
This second method, I will show you to how to install Tailwind with using Jetstream command as below steps:
If you not download Laravel project yet, try below command to download fresh project and navigate to the project.
composer create-project laravel/laravel LaravelApp
cd LaravelApp
Next, we need composer command to install Jetstream package. see below command
composer require laravel/jetstream
To create auth scaffolding files the help you to generate basic login, register and email verification, we will use livewire along with Tailwind as well.
php artisan jetstream:install livewire
Next, let’s run bellow command for install npm
npm install && npm run dev
This third method, I will show you to how to install Tailwind with using Breeze package as below steps:
If you not download Laravel project yet, try below command to download fresh project and navigate to the project.
composer create-project laravel/laravel LaravelApp
cd LaravelApp
Next, we need composer command to install Breeze package. see below command
composer require laravel/breeze
To create auth scaffolding files the help you to generate basic login, register and email verification.
php artisan breeze:install
Next, let’s run bellow command for install npm
npm install && npm run dev
All configuration for using the Tailwind CSS above is done automatically after installing those package. So what do you think which one is the best for you?
You might also like...
As the founder and passionate educator behind this platform, I’m dedicated to sharing practical knowledge in programming to help you grow. Whether you’re a beginner exploring Machine Learning, PHP, Laravel, Python, Java, or Android Development, you’ll find tutorials here that are simple, accessible, and easy to understand. My mission is to make learning enjoyable and effective for everyone. Dive in, start learning, and don’t forget to follow along for more tips and insights!. Follow him