goodm4ven/tailwind-merge

Tailwind Merge

Dealing with TailwindCSS classes overriding can either be done with fighting important (!) classes, OR by using this package to remove the conflicting ones from the targetted component and keep the outside (passed) one instead.

Installation

Install the package with Composer:

composer require goodm4ven/tailwind-merge

Usage

It's all about the last-wins approach for consistency. Single string or multiple ones are around as arguments. You may also add them as an associative array to conditions!

• Global helper function for PHP anywhere

twMerge('text-lg text-sm'); // results in "text-sm"
twMerge('sm:text-lg', 'sm:text-3xl'); // results in "sm:text-3xl"
twMerge([
    'sm:text-lg py-10 px-5' => true,
    'sm:text-xl' => false,
    'sm:text-3xl py-5',
    'sm:text-sm' => true,
]); // results in "sm:text-sm px-5 py-5"

• Resolve the merger directly (container or facade)

// Either
app('tailwind-merge')->classes('last conflicting classes win');
// Or
\GoodMaven\TailwindMerge\TailwindMerge::classes('last conflicting classes win');

• Attribute bag macro inside Laravel Blade components

$attributes->twMerge('last conflicting classes win', 'then last conflicting classes win');

• Blade directive for Blade views in general

@twMerge('last conflicting classes win')

Development

This package was initiated based on my Laravel package template that is built on top of Spatie's. Make sure to read the docs for both.

Support

Support ongoing package maintenance as well as the development of other projects through sponsorship or one-time donations if you prefer.

Credits

• Inspired by the original package
• Blade Formatter
• Pest
• Playwrite
• PHP
• TailwindCSS
• Laravel
• ChatGPT & Codex
• GoodM4ven
• All Contributors