justbetter/laravel-blade-tailwind-merge

This package is abandoned and no longer maintained. No replacement package was suggested.

Tailwind classes merging with Laravel Blade components

0.3.0 2023-09-12 15:40 UTC

Requires

• laravel/framework: *

Suggests

• gehrisandro/tailwind-merge-php: Uses tailwind-merge-php instead of the built-in merger

MIT

• Roy Duineveld

README

Archived as there is a new package which solves the known issues of this package: tailwind-merge-laravel

Laravel Blade Tailwind Merge

This package adds a ->tailwind() method to the attribute bag used within Blade Components which let you overwrite classes.

Example

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="/" 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.

Installation

composer require justbetter/laravel-blade-tailwind-merge

Usage

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>

Known issues

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!

References

• Tailwind Merge
• Pull request to have this within the framework
• Idea from @mpociot on Twitter

License

The MIT License (MIT). Please see License File for more information.