Reading Time: 6 minutes

506 Views

Tailwind CSS has grown in popularity as a utility-first CSS framework that allows developers to easily design attractive and flexible web interfaces.

Integrating Tailwind CSS into your project in Laravel 10 can boost your design and development process by providing a robust toolkit for designing modern user experiences.

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

This tutorial will walk you through installing and using Tailwind CSS in a Laravel 10 application. We’ll look at how to install Tailwind CSS, customise its settings, and incorporate it into your project’s workflow.

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.

Method #1: 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: [],
}

Next,

Add Tailwind with Laravel mix

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

Method #2: Install Tailwind CSS using “Breeze”

Run this command to install breeze package,

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

Method #3: Install Tailwind CSS using “Jetstream”

Run this command to install jetstream package,

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

We hope this article helped you to learn about Laravel 10 Install Tailwind CSS Example Tutorial 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.