Laravel Tailwind Merge is a package that automatically resolves Tailwind CSS class conflicts in Laravel. This allows you to merge multiple Tailwind classes and resolves conflicts.
Here's a basic example from the README. Given the following code in a blade component:
// circle.blade.php
twMerge('w-10 h-10 rounded-full bg-red-500') }}>

Here's a usage example with the above circle component:
{{-- your-view.blade.php --}}

{{-- Output --}}

Here are some more examples from the readme of the inner workings of the merge method. You can use the provided TailwindMerge facade:
use TailwindMerge\Laravel\Facades\TailwindMerge;

// block and inline are conflicting; The last rule wins.
TailwindMerge::merge('block inline'); // inline

// px-6 overrides pl-4
TailwindMerge::merge('pl-4 px-6'); // px-6

// with breakpoints
TailwindMerge::merge('h-10 lg:h-12 lg:h-20'); // h-10 lg:h-20

// dark mode
TailwindMerge::merge('text-black dark:text-white dark:text-gray-700');
// text-black dark:text-gray-700

// etc.

You can also use the @twMerge Blade directive as well:
@twMerge('w-10 h-10 rounded-full bg-red-500 bg-blue-500')
{{-- w-10 h-10 rounded-full bg-blue-500 --}}

You can learn more about this package, get full installation instructions, and view the source code on GitHub.

The post Laravel Tailwind Merge appeared first on Laravel News.
Join the Laravel Newsletter to get Laravel articles like this directly in your inbox.