How To Install Tailwind CSS In Laravel 9

Websolutionstuff | Jun-13-2022 | Categories : Laravel CSS

In this article, we will see how to install tailwind CSS in laravel 9. Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file. It's fast, flexible, and reliable — with zero runtime.

So, let's see how to install tailwind css in laravel 9, install tailwind in laravel 9, laravel tailwind css, laravel breeze tailwind, tailwind laravel mix, laravel 9 tailwind css install, install tailwind css via npm, install tailwind css with jetstream, laravel 9 breeze install tailwind css.

 

Step 1: Install Laravel

In this step, we will install the laravel app using the below command.

composer create-project laravel/laravel new-app

 

 

Step 2: Install Tailwind CSS

Now, we will install CSS using the below command.

npm install -D tailwindcss

npx tailwindcss init

 

Step 3: Configure Template Path

Add the paths to all of your template files in your tailwind.config.js file.

module.exports = {
  content: ["./src/**/*.{blade.php,html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

Step 4: Add Tailwind with Laravel mix

Now, open the webpack.mix.js file and add lines there.

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

 

 

Step 5: Add Tailwind CSS in the app.css file

Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

resources/css/app.css

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

 

Step 6: Install npm and Build

Now, run the npm install command and then build it with the npm run watch command.

npm install

Build npm process.

npm run watch

 

 

Step 7: Use Tailwind CSS in App

Now, you can use CSS in the blade file.

<!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="container mx-auto px-10">
      <h1 class="text-3xl font-bold underline">
        How To Install Tailwind CSS In Laravel 9 - Websolutionstuff
      </h1>
  
      <p> Hello world! </p>
  </div>
</body>
</html>

 


You might also like:

Recommended Post
Featured Post
How to Upload File on the FTP Server Using PHP
How to Upload File on the FTP...

In this small post i will show you how to upload file on the ftp server using php. As we know there are many ftp functio...

Read More

May-20-2021

Laravel 8 Toastr Notifications Example
Laravel 8 Toastr Notifications...

Today, I will show you Laravel 8 Toastr Notifications Example. There are many types of notifications availa...

Read More

Oct-19-2020

How To Resize Image Before Upload In Laravel 10
How To Resize Image Before Upl...

In this article, we will see how to resize images before uploading in laravel 10. Here, we will learn about laravel 10&n...

Read More

Mar-29-2023

How to Get Request Header in Laravel 10
How to Get Request Header in L...

Ever wondered how to access request headers in your Laravel 10 application? Join me as I guide you through a quick and s...

Read More

Dec-11-2023