-1

I am learning Laravel blade . I have installed the breeze and I am trying to add a button in the 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">
                    Hello, You're logged in!
                    <br><br><button type="button" class="btn btn-danger">Danger</button>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

The button is appearing without any shape or outline. Can you please let me know what is the mistake i am doing here.

enter image description here

Peppermintology
  • 9,343
  • 3
  • 27
  • 51
logeeks
  • 4,849
  • 15
  • 62
  • 93
  • there are no `.btn` and `.btn-danger` classes in tailwind. You should have a look at the tailwind docs if you want to use it: https://tailwindcss.com/docs/utility-first – Cornel Raiu Dec 28 '21 at 18:18
  • in tailwind you can use something like this for a similar danger button: `rounded-md bg-red-500 text-white focus:ring-red-600 px-4 py-2 text-sm` as the button classes. I did not test it but it should look decent – Cornel Raiu Dec 28 '21 at 18:21
  • Thanks, I think it is better to use bootstrap than using tailwind features – logeeks Dec 28 '21 at 18:23
  • Yes, but looking at these classes, you are already using tailwind: `max-w-7xl mx-auto sm:px-6 lg:px-8`. Using both Tailwind and Bootstrap would be a mess and they would just cancel each other – Cornel Raiu Dec 28 '21 at 18:24

1 Answers1

1

Looking at your markup, there are a few Tailwind related classes, so I will assume you are using Tailwindcss.

In this case, you are trying to use Bootstrap classes in a Tailwind CSS setup.

In order to achieve a button similar to the danger one you could do:

<button 
    type="button" 
    class="rounded-md bg-red-500 text-white focus:ring-red-600 px-4 py-2 text-sm">Danger</button>

https://tailwindcss.com/docs/installation

Cornel Raiu
  • 2,758
  • 3
  • 22
  • 31