How to Install Tailwind CSS in Laravel 9 in 3 Ways

Sovary August 1, 2022 1.36K
6 minutes read

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?

What is Tailwind CSS?

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.

Install Tailwind CSS in Laravel 9

There are various ways to install Tailwind CSS

  1. Install Tailwind CSS using npm
    • Step 1 - Install Laravel
    • Step 2 - Install Tailwind CSS (Vite)
    • Step 3 - Configure Template Paths (Vite)
    • Step 4 - Add Tailwind Directive to CSS (Vite)
    • Step 5 - Install npm and Build (Vite)
    • Step 6 - Using Tailwind CSS in App (Vite)
    • -----------------
    • Step 3 - Add Tailwind with Laravel mix (Mix)
    • Step 4 - Configure Template Paths (Mix)
    • Step 5 - Add Tailwind Directive to CSS (Mix)
    • Step 6 - Install npm and Build (Mix)
    • Step 7 - Using Tailwind CSS in App (Mix)
  2. Install Tailwind CSS using Jetstream
    • Step 1 - Install Laravel
    • Step 2 - Install Jetstream
    • Step 3 - Create Auth with Livewire
    • Step 4 - Install npm & Run Package
  3. Install Tailwind CSS using Breeze
    • Step 1 - Install Laravel
    • Step 2 - Install Breeze
    • Step 3 - Create Auth with Livewire
    • Step 4 - Create Auth with Livewire

1. Install Tailwind CSS using npm

First, I will show you to how to install Tailwind with using npm command as below steps:

1. Step 1 - Install Laravel

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

1. Step 2 - Install Tailwind CSS

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

1. Step 3 - Configure Template Paths

►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: [],
}

1. Step 4 - Add Tailwind Directive to CSS

►USING Vite

Add directive tailwind for each layers.

Open file resources -> css -> app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

1. Step 5 - Install npm and Build

►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

1. Step 6 - Using Tailwind CSS in App

►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>
Next I will show you how to install Tailwind using npm with laravel-mix tool. I will skip step 1 and step 2 where to install and initialize tailwind config file.

1. Step 3 - Add Tailwind with Laravel mix

►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"),
  ]);

1. Step 4 - Configure Template Paths

►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: [],
}

1. Step 5 - Add Tailwind Directive to CSS

►USING Laravel Mix

Add directive tailwind for each layers.

Open file resources -> css -> app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

1. Step 6 - Install npm and Build

►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

1. Step 7 - Using Tailwind CSS in App

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

2. Install Tailwind CSS using Jetstream

This second method, I will show you to how to install Tailwind with using Jetstream command as below steps:

2. Step 1 - Install Laravel

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

2. Step 2 - Install Jetstream

Next, we need composer command to install Jetstream package. see below command

composer require laravel/jetstream

2. Step 3 - Create Auth with Livewire

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

2. Step 4 - Install npm & Run Package

Next, let’s run bellow command for install npm

npm install && npm run dev

3. Install Tailwind CSS using Breeze

This third method, I will show you to how to install Tailwind with using Breeze package as below steps:

3. Step 1 - Install Laravel

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

3. Step 2 - Install Breeze

Next, we need composer command to install Breeze package. see below command

composer require laravel/breeze

3. Step 3 - Install Breeze Scaffolding Auth

To create auth scaffolding files the help you to generate basic login, register and email verification.

php artisan breeze:install

3. Step 4 - Install npm & Run Package

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

 

Laravel  PHP  Laravel 9 
Author

Founder of CamboTutorial.com, I am happy to share my knowledge related to programming that can help other people. I love write tutorial related to PHP, Laravel, Python, Java, Android Developement, all published post are make simple and easy to understand for beginner. Follow him    

Search
Tags
Laravel 6.* Hosting Javascript JQuery Laravel Cheerio Android Kotlin Java Video Firebase Web scraping Admob PHP Python Ajax Node.js Laravel 9 Query Builder Laravel Middleware Carbon Laravel Laravel Collections Laravel Mail Laravel 10 CSS
Popular Articles
Related Articles