Reading Time: 6 minutes

6,231 Views

Tailwind is the CSS framework just like Bootstrap. It provides several design patterns, classes, responsive assets, etc. Inside this article we will see the concept i.e Laravel 9 How To Install Tailwind CSS in application.

Article contains the classified information about Tailwind CSS installation and their usage in a laravel application. We will see the basics of few class of tailwind library into a web page.

We can use the reusable components of this library and in a easy pattern we can generate responsive web design pages. Inside laravel application, we have these options by which we can install tailwind CSS library –

Install Tailwind CSS using npm
Install Tailwind CSS using Breeze
Install Tailwind CSS using Jetstream

Learn More –

Let’s get started.

Laravel Installation

Open terminal and run this command to create a laravel project.

composer create-project laravel/laravel myblog

It will create a project folder with name myblog inside your local system.

To start the development server of laravel –

php artisan serve

URL: http://127.0.0.1:8000

Assuming laravel already installed inside your system.

Install Tailwind CSS using npm

In this case, we will install via npm i.e Node package manager. Let’s install tailwind css with dependency and create tailwind.config.js file.

Installation

Open project into terminal and run this command into it.

$ npm install -D tailwindcss postcss autoprefixer

$ npx tailwindcss init

Path Configuration

Open tailwind.config.js file from application root and add files path there –

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

Add Tailwind with Laravel mix

Next,

Open webpack.mix.js file from application root 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"),
    ]);

Add Tailwind CSS in app.css file

Here, Open app.css file from /resources/css folder and add lines there:

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

Install npm and Build

Run this command and then compile it –

$ npm install

$ npm run watch

Use Tailwind CSS in App

Create a file sample.blade.php inside /resources/views folder. Open file and write this code into it.

<!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">
            Laravel 9 How to Install Tailwind CSS - Online Web Tutor
        </h1>
        <p class="bg-sky-600 hover:bg-sky-700">
            <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="{{ URL::to('online-web-tutor-sanjay-kumar.jpeg') }}" alt=""
            width="200" height="200">
            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>

Output

Install Tailwind CSS using Breeze

Run this command to install breeze package into a laravel application.

$ composer require laravel/breeze --dev

Create auth scaffolding files of breeze along with tailwind css –

$ php artisan breeze:install

Next,

Let’s run bellow command for install npm –

$ npm install && npm run dev

All the above configuration to use tailwind CSS what we did above will be done automatically after installation of this package.

Install Tailwind CSS using Jetstream

Run this command to install jetstream package into a laravel application.

$ composer require laravel/jetstream

Create auth scaffolding files of authentication, we will use livewire along with tailwind css –

$ php artisan jetstream:install livewire

Next,

Let’s run bellow command for install npm –

$ npm install && npm run dev

All the above configuration to use tailwind CSS what we did above will be done automatically after installation of this package.

We hope this article helped you to learn about Laravel 9 How To Install Tailwind CSS in Application in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.