0

I am trying to implement some simple Tailwind CSS components for a Laravel project. First, I installed Laravel Breeze, which automatically installs Tailwind CSS and AlpineJS. Then, I changed the code in dashboard.blade.php using the code on the TailwindUI website.

<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">
       <!-- I've added the code I copied from TailwindUI website here... -->
    </div>
</x-app-layout>

After adding the code, the Dashboard looks like this.

After adding the code, the Dashboard looks like this.

Instead, it should look like this.

enter image description here

I've tried components other than the Tailwind UI but with no luck. Is there something I am missing, like downloading another dependency?

Karl Hill
  • 12,937
  • 5
  • 58
  • 95
someone
  • 33
  • 4
  • What tailwind version do you have installed? It looks like tailwind is installed because the breeze header uses it. Also, you could try adding something obvious to the block you are trying to add like `bg-red-300` to see if tailwind is installed properly. – Full Stack Alien Feb 04 '22 at 19:52

2 Answers2

0

Tailwind and Alpine.js do not get added when installing Laravel Breeze. If you are sure that you've set up Tailwind correctly, compile your assets after changing a Blade file.

npm run dev or npm run prod

Otherwise, first, install Tailwind here.

Then add the following to webpack.mix.js.

const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ])
    .options({
        postCss: [tailwindcss('tailwind.config.js')],
    });
Karl Hill
  • 12,937
  • 5
  • 58
  • 95
  • I just realized that tailwindcss gets compressed to around 10-20 KB, that's why it doesn't work as it should. Is there a way to use the original size that's around 2MB? – someone Feb 05 '22 at 03:23
0

I just had this same problem. I think there is something that makes the generated CSS only contain classes that are present in the Blade files.

Stopping the npm run dev and restarting it has fixed it for me.

See here

Daniel Twigg
  • 749
  • 4
  • 22