Install Daisy UI Tailwind in Laravel

In this section, we will explore how to integrate Daisy UI as a Tailwind CSS component library in Laravel 9. Daisy UI is a free and open-source library that provides Tailwind CSS components using short classes similar to Bootstrap, such as .btn and .btn-primary. It offers a wide range of components including buttons, cards, alerts, avatars, modals, and dropdowns. We’ll demonstrate how to install Daisy UI alongside Laravel Breeze, although it’s also compatible with Laravel Jetstream.

Install Daisy UI Tailwind Components in Laravel

Create Laravel Project.

composer create-project laravel/laravel laravel-daisyui

Connect with database and 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

Install daisyUI in laravel

Install daisyUI via NPM:

npm i daisyui

Then add daisyUI to your tailwind.config.js files:

module.exports = {
 //...
 plugins: [require("daisyui")],
}

add daisyUI plugin in tailwind.config.js.

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms'), require("daisyui")],
};

Then Run Below command.

npm run dev

Now you application is ready with daisy UI.

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200 h-screen flex justify-center">
                    
                    <div class="mt-20">
                        <h3 class="text-center text-xl font-bold">Daisyui Button</h3>
                        <button class="btn">Button</button>
                        <button class="btn btn-primary">Button</button>
                        <button class="btn btn-secondary">Button</button>
                        <button class="btn btn-accent">Button</button>
                        <button class="btn btn-ghost">Button</button>
                        <button class="btn btn-link">Button</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

Install Daisy UI Tailwind Components in Laravel

Install daisyUI in laravel

saim ansari