CODEWITHSUNDEEP
laraveltailwind-css
Jakub
Jakub

Reputation: 1700

Can't seem to get custom utilities to work for tailwind with laravel

I have a new laravel project installed with jetstream. Tailwind default syntax works bg-gray-500 ect

I am trying to follow this video by Adam Wathan

When I have this style in the div, everything works.

<div class= "h-10 w-10 p-4 text-base rounded-md bg-gray-700 flex justify-center items-center text-white">
        <i class="bi bi-kanban text-xl pb-2"></i>
</div>

However when I try and make a utility like in the tutorial nothing is showing up. Just even trying to change the background color to pink to see if it works

enter image description here

<div class= "navbtn">
        <i class="bi bi-kanban text-xl pb-2"></i>
</div>

Even when I run npm run dev, it gives me an error if I create the .navbtn thing.

This is the error

enter image description here

What am I doing wrong?

Upvotes: 1

Views: 503

Answers (1)

Jakub
Jakub

Reputation: 1700

I found the solution! Still not sure if this is laravel specific to make custom utilites work but in the app/css file need to set it up like this

Need to add the @layer componets

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer components {
    .nav-icon {
        @apply bg-green-500;
    }

    .test-style{
        @apply h-10 border-l-4 border-blue-500 flex p-3 justify-center items-center text-green-500 font-semibold;
    }
}

Upvotes: 4

Related Questions