How to install Tailwind CSS in Laravel 9?

10-Apr-2023

.

Admin

How to install Tailwind CSS in Laravel 9?

Hi friends,

This tutorial is focused on the example of How to install tailwind css in laravel 9. we will help you to give an example of install tailwindcss on a fresh laravel 9 install. This article will give you a simple example of step-by-step how to install Tailwind CSS In Laravel 9 . you can understand the concept of Tailwind css in laravel 9.

There are many ways to install Tailwindcss on a fresh Laravel 9 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 9

<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 9