Archived as there is a new package which solves the known issues of this package: tailwind-merge-laravel
This package adds a ->tailwind()
method to the attribute bag used within Blade Components which let you overwrite classes.
Let's say you've a Blade "link" component like this:
<a {{ $attributes->merge(['class' => 'flex px-5']) }}>
{{ $slot }}
</a>
When you're using this like:
<x-button href="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/" class="px-3">Home</x-button>
You end up with flex px-5 px-3
instead of flex px-3
. Because Tailwind classes are sorted and px-5
is listed after px-3
our "overwrite" won't do anything.
composer require justbetter/laravel-blade-tailwind-merge
From the example above, just use tailwind('...')
instead of merge(['class' => '...')
or class('...')
when you need this.
<a {{ $attributes->tailwind('flex px-5') }}>
{{ $slot }}
</a>
Currently the merging works only by checking the first part before the dash. So text-red-500
overwrites text-xl
and visa versa because we only check for text-*
. To fix this we need to know all Tailwind options just like tailwind-merge does. Maybe in the future... but a PR is welcome!
The MIT License (MIT). Please see License File for more information.