Install Daisy UI Tailwind in Laravel 9

In this section we will see how to use daisy ui as a tailwind css components in laravel 9. Daisy UI is a , free and open-source Tailwind CSS component library. Daisy ui use sort class like bootstrap eg. `.btn` `.btn-primary`. Tailwind daisy ui come with lots of tailwind components like , button, card, alert, avatar, modal, Dropdown etc.. For this section we will install daisy ui with laravel breeze, you can also use daisy ui with laravel jetstream.

Install Daisy UI Tailwind Components in Laravel 9

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

In laravel.

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 npm run dev.

npm run dev

Now you application is ready with daisy UI.

views/dashboard.blade.php

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

laravel tailwind daisy ui

Read Also

Laravel 9 Add Simple Sidebar with Tailwind CSS Example

How to Use Carousel Slider in Laravel 9 Example

Laravel 9 Posts with Tags Many to Many Relationships Example

Laravel 9 Insert Category in Posts CRUD Example

How to Use Ckeditor 5 in Laravel 9 Vite with Tailwind CSS

Laravel 9 Simple Image Upload in Ckeditor 5 Example

Laravel 9 Flash Message Timeout and Hide Message Example

Install & Setup Markdown Editor in Laravel 9

Nuxt 3 Data Fetching Using Laravel 9 Api Example

Laravel 9 Image Upload with Preview using Tailwind CSS & Alpine JS

Laravel 9 with Tailwind CSS Form Validation Example

Laravel 9 Backend Api Connect with Vue 3 Using Axios Example

Laravel 9 Rest Api with Vue 3 Composition Api CRUD Example

Laravel 9 Authentication with Next js Example

Laravel 9 Sanctum Authentication with Nuxt JS Example

Laravel 9 Simple Search with Pagination Example

Laravel 9 Install Setup TALL(Tailwind, Alpinejs, Livewire) Admin Panel

How to Fix and Clean Code Style in laravel 9

Laravel 9 Image File Upload Example

3 Way to Create Slug in Laravel 9 without Package

How to Add Dark Mode in Laravel 9 with Tailwind CSS