Install Tailwind CSS with Laravel 11
Hello, laravel web developers! This article will show how to install tailwind CSS with laravel 11. Tailwind CSS is an open-source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables.
The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.
Here, we'll see three ways to install Tailwind CSS in the Laravel application.
- Install Tailwind CSS using npm
- Install Tailwind CSS using Breeze
- Install Tailwind CSS using Jetstream
First, we'll install tailwind CSS using NPM.
In this step, we'll install laravel 11 using the following command.
composer create-project laravel/laravel example-app
Next, we'll install Tailwind CSS with the dependency and create the tailwind.config.js file using the following command.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Open the tailwind.config.js file and add the file paths there.
tailwind.config.js
export default {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [
],
}
Now, open the vite.config.js file and add the following code to that file.
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()],
},
}
});
Next, we'll open the app.css file and add the following code to that file.
resources/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Then, we'll install npm and run the following code to that file.
npm install
npm run dev
Now, you can use Tailwind CSS in your Blade 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">
@vite('resources/css/app.css')
</head>
<body>
<div class="container mx-auto px-10">
<h1 class="text-3xl font-bold underline">
Install Tailwind CSS with Laravel 11 - Techsolutionstuff
</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>
Next, we'll install tailwind CSS using Breeze.
Now, run the install laravel breeze package using the following command.
composer require laravel/breeze --dev
Then, install Laravel Breeze for basic auth scaffolding using the following command.
php artisan breeze:install
Next, run the npm install using the following command.
npm install
npm run dev
Now, we'll install tailwind CSS using Jetstream.
In this step, we'll install the jetstream using the composer command.
composer require laravel/jetstream
Next, we'll create authentication using the following command. You can create basic login, register, and email verification.
php artisan jetstream:install livewire
OR
php artisan jetstream:install livewire --teams
Now, install npm using the below command
npm install
let's run the package:
npm run dev
You might also like :
- Read Also: Laravel 11 Generate PDF and Send Email Example
- Read Also: Laravel 11 Livewire CRUD using Jetstream & Tailwind CSS
- Read Also: How To Install Tailwind CSS In React JS App
- Read Also: How To Create Modal Popup Using Tailwind CSS
