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.