Blade components modifications problem

I am using the

badge component

badge component

, and I would like to remove the border. I checked the component and found that the

ring-1

ring-1

class from

Tailwind

Tailwind

is responsible for the border. I tried adding

class="ring-0"

class="ring-0"

outside the component, but it still doesn't overwrite the default class. Am I missing something, or why isn't it overriding the default class?

This is how I am using the component:

<x-filament::badge
    class="ring-0"
    style="display: inline-block;
            max-width: 150px;
            background-color: {{ $darkenedBackgroundWithOpacity }};
            color: {{ $attributeOption->color_code }};">
    {{ __($attributeOption->value) }}
</x-filament::badge>

<x-filament::badge
    class="ring-0"
    style="display: inline-block;
            max-width: 150px;
            background-color: {{ $darkenedBackgroundWithOpacity }};
            color: {{ $attributeOption->color_code }};">
    {{ __($attributeOption->value) }}
</x-filament::badge>

I checked the browser's inspection tool, and both classes are defined on the tag.

Filament•15mo ago•

1 reply

wazkaz

Blade components modifications problem

I am using the

badge component

badge component

, and I would like to remove the border. I checked the component and found that the

ring-1

ring-1

class from

Tailwind

Tailwind

is responsible for the border. I tried adding

class="ring-0"

class="ring-0"

outside the component, but it still doesn't overwrite the default class. Am I missing something, or why isn't it overriding the default class?

This is how I am using the component:

<x-filament::badge
    class="ring-0"
    style="display: inline-block;
            max-width: 150px;
            background-color: {{ $darkenedBackgroundWithOpacity }};
            color: {{ $attributeOption->color_code }};">
    {{ __($attributeOption->value) }}
</x-filament::badge>

<x-filament::badge
    class="ring-0"
    style="display: inline-block;
            max-width: 150px;
            background-color: {{ $darkenedBackgroundWithOpacity }};
            color: {{ $attributeOption->color_code }};">
    {{ __($attributeOption->value) }}
</x-filament::badge>

I checked the browser's inspection tool, and both classes are defined on the tag.

Blade components modifications problem

Similar Threads

Blade components modifications problem

Similar Threads

Similar Threads

Similar Threads