PHPackages kalel1500/laravel-tailwind-merge - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. kalel1500/laravel-tailwind-merge ActiveLibrary[Utility & Helpers](/categories/utility) kalel1500/laravel-tailwind-merge ================================ TailwindMerge for Laravel merges multiple Tailwind CSS classes by automatically resolving conflicts between them v0.3.0-beta.1(3mo ago)0122MPL-2.0PHPPHP ^8.2CI passing Since Mar 17Pushed 3w agoCompare [ Source](https://github.com/kalel1500/laravel-tailwind-merge)[ Packagist](https://packagist.org/packages/kalel1500/laravel-tailwind-merge)[ RSS](/packages/kalel1500-laravel-tailwind-merge/feed)WikiDiscussions master Synced 3w ago READMEChangelogDependencies (10)Versions (4)Used By (2) Note This project is a fork from [tailwind-merge](https://github.com/gehrisandro/tailwind-merge-laravel) by [Sandro Gehri](https://github.com/gehrisandro). [![TailwindMerge for Laravel](https://raw.githubusercontent.com/kalel1500/laravel-tailwind-merge/master/art/example.png)](https://raw.githubusercontent.com/kalel1500/laravel-tailwind-merge/master/art/example.png) [![GitHub Workflow Status (main)](https://github.com/kalel1500/laravel-tailwind-merge/actions/workflows/tests.yml/badge.svg)](https://github.com/kalel1500/laravel-tailwind-merge/actions/workflows/tests.yml) [![Total Downloads](https://camo.githubusercontent.com/ddef1ed8fbc06007d53ce87c72384e9c17ab0bc962e7a6d1fce792a854d77e7e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6b616c656c313530302f6c61726176656c2d7461696c77696e642d6d65726765)](https://packagist.org/packages/kalel1500/laravel-tailwind-merge) [![Latest Version](https://camo.githubusercontent.com/e82e66338872b2480c166e308da40034a7756f09922176ffa718e1891d886cea/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6b616c656c313530302f6c61726176656c2d7461696c77696e642d6d65726765)](https://packagist.org/packages/kalel1500/laravel-tailwind-merge) [![License](https://camo.githubusercontent.com/80e82a9bb313249580a9f5df46ab1c6fabcf69e46dc45737361885b0dc8d755b/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6b616c656c313530302f6c61726176656c2d7461696c77696e642d6d65726765)](https://packagist.org/packages/kalel1500/laravel-tailwind-merge) --- **TailwindMerge for Laravel** allows you to merge multiple [Tailwind CSS](https://tailwindcss.com/) classes and automatically resolves conflicts between classes by removing classes conflicting with a class defined later. This is especially helpful when you want to override Tailwind CSS classes in your Blade components. A Laravel / PHP port of [tailwind-merge](https://github.com/dcastil/tailwind-merge) by [dcastil](https://github.com/dcastil). Supports Tailwind v4.0 up to v4.2 > If you are **NOT** using Laravel, you can use the [TailwindMerge for PHP](https://github.com/tales-from-a-dev/tailwind-merge-php) directly. Table of Contents ----------------- [](#table-of-contents) - [Get Started](#get-started) - [Usage](#usage) - [Laravel Blade Components](#use-in-laravel-blade-components) - [Laravel Blade Directive](#use-laravel-blade-directive) - [Everywhere else in Laravel](#everywhere-else-in-laravel) - [Configuration](#configuration) - [Custom Tailwind Config](#custom-tailwind-config) - [Contributing](#contributing) Get Started ----------- [](#get-started) > **Requires [Laravel 12](https://github.com/laravel/laravel)** First, install `TailwindMerge for Laravel` via the [Composer](https://getcomposer.org/) package manager: ``` composer require kalel1500/laravel-tailwind-merge ``` Optionally, publish the configuration file: ``` php artisan vendor:publish --provider="Thehouseofel\TailwindMerge\TailwindMergeServiceProvider" ``` This will create a `config/tailwind-merge.php` configuration file in your project, which you can modify to your needs using environment variables. For more information, see the [Configuration](#configuration) section: Finally, you may use `TailwindMerge` in various places like your Blade components: ``` // circle.blade.php twMerge('w-10 h-10 rounded-full bg-red-500') }}> // your-view.blade.php // output ``` `TailwindMerge` is not only capable of resolving conflicts between basic Tailwind CSS classes, but also handles more complex scenarios: ``` use Thehouseofel\TailwindMerge\Facades\TailwindMerge; // conflicting classes TailwindMerge::merge('block inline'); // inline TailwindMerge::merge('pl-4 px-6'); // px-6 // non-conflicting classes TailwindMerge::merge('text-xl text-black'); // text-xl text-black // 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 // with hover, focus and other states TailwindMerge::merge('hover:block hover:inline'); // hover:inline // with the important modifier TailwindMerge::merge('!font-medium !font-bold'); // !font-bold // arbitrary values TailwindMerge::merge('z-10 z-[999]'); // z-[999] // arbitrary variants TailwindMerge::merge('[&>*]:underline [&>*]:line-through'); // [&>*]:line-through // non tailwind classes TailwindMerge::merge('non-tailwind-class block inline'); // non-tailwind-class inline ``` It's possible to pass the classes as a string, an array or a combination of both: ``` TailwindMerge::merge('h-10 h-20'); // h-20 TailwindMerge::merge(['h-10', 'h-20']); // h-20 TailwindMerge::merge(['h-10', 'h-20'], 'h-30'); // h-30 TailwindMerge::merge(['h-10', 'h-20'], 'h-30', ['h-40']); // h-40 ``` Usage ----- [](#usage) For in depth documentation and general PHP examples, take a look at the [tales-from-a-dev/tailwind-merge-php](https://github.com/tales-from-a-dev/tailwind-merge-php) repository. ### Use in Laravel Blade Components [](#use-in-laravel-blade-components) Create your Blade components as you normally would, but instead of specifying the `class` attribute directly, use the `mergeClasses` method: ``` // circle.blade.php twMerge('w-10 h-10 rounded-full bg-red-500') }}> ``` Now you can use your Blade components and pass additional classes to merge: ``` // your-view.blade.php ``` This will render the following HTML: ``` ``` > **Note:** Usage of `$attributes->merge(['class' => '...'])` is currently not supported due to limitations in Laravel. #### Merge classes on multiple elements [](#merge-classes-on-multiple-elements) By default Laravel allows you to only merge classes in one place. But with `TailwindMerge` you can merge classes on multiple elements by using `twMergeFor()`: ``` // button.blade.php withoutTwMergeClasses()->twMerge('p-2 bg-gray-900 text-white') }}> twMergeFor('icon', 'h-4 text-gray-500') }} viewBox="0 0 448 512"> {{ $slot }} ``` You can now specify additional classes for the button and the svg icon: ``` // your-view.blade.php Click Me ``` This will render the following HTML: ``` Click Me ``` > Note: Use `withoutTwMergeClasses()` on your main attributes bag, otherwise all `class:xyz` attributes will be rendered in the output. ### Use Laravel Blade Directive [](#use-laravel-blade-directive) The package registers a Blade directive which can be used to merge classes in your Blade views: ``` @twMerge('w-10 h-10 rounded-full bg-red-500 bg-blue-500') // w-10 h-10 rounded-full bg-blue-500 // or multiple arguments @twMerge('w-10 h-10 rounded-full bg-red-500', 'bg-blue-500') // w-10 h-10 rounded-full bg-blue-500 ``` ### Everywhere else in Laravel [](#everywhere-else-in-laravel) If you don't use Laravel Blade, you can still use `TailwindMerge` by using the Facade or the helper method directly: #### Facade [](#facade) ``` use Thehouseofel\TailwindMerge\Facades\TailwindMerge; TailwindMerge::merge('w-10 h-10 rounded-full bg-red-500 bg-blue-500'); // w-10 h-10 rounded-full bg-blue-500 ``` #### Helper Method [](#helper-method) ``` twMerge('w-10 h-10 rounded-full bg-red-500 bg-blue-500'); // w-10 h-10 rounded-full bg-blue-500 ``` ### More usage examples [](#more-usage-examples) Take a look at the [TailwindMerge for PHP](https://github.com/tales-from-a-dev/tailwind-merge-php) repository. Configuration ------------- [](#configuration) This package provides two types of configuration: - `merge_config`: Controls how Tailwind classes are merged - `cache`: Controls Laravel-specific caching behavior ### Modify merge process [](#modify-merge-process) If you are using Tailwind CSS without any extra config, you can use TailwindMerge right away. And stop reading here. If you're using a custom Tailwind config, you may need to configure TailwindMerge as well to merge classes properly. By default, TailwindMerge is configured in a way that you can still use it if all the following apply to your Tailwind config: - Only using color names which don't clash with other Tailwind class names - Only deviating by number values from number-based Tailwind classes - Only using font-family classes which don't clash with default font-weight classes - Sticking to default Tailwind config for everything else If some of these points don't apply to you, you need to customize the configuration. All Tailwind Merge-related configuration must now be defined inside the `merge_config` key in your config file. If TailwindMerge is not able to merge your classes properly, you can modify the merge process by customizing existing class groups or adding new ones. For example, if you want to add a custom font size of `very-large`: ``` // config/tailwind-merge.php return [ 'merge_config' => [ 'classGroups' => [ 'font-size' => [ ['text' => ['very-large']], ], ], ], ]; ``` > For a more detailed explanation of the configuration options, visit the [original package documentation](https://github.com/dcastil/tailwind-merge/blob/v1.14.0/docs/configuration.md). ### Cache configuration [](#cache-configuration) You can configure caching behavior using the `cache` key: ``` // config/tailwind-merge.php return [ 'cache' => [ 'enabled' => env('TW_MERGE_CACHE_ENABLED', true), 'store' => env('TW_MERGE_CACHE_STORE', 'file'), // or null to use default store ], ]; ``` Or using environment variables: ``` TW_MERGE_CACHE_ENABLED= TW_MERGE_CACHE_STORE= ``` - `enabled`: Enable or disable caching entirely. - `store`: The cache store to use. If `null`, the default store is used. > **Note** > > By default, this package uses the `file` cache store instead of Laravel's default. > > This is intentional, as Tailwind Merge generates a high number of small cache entries. Using the `database` driver may lead to performance issues and excessive database queries. > **How it works internally** > > When using the `file` store, the package automatically maps it to a dedicated cache store named `file_tw_merge`. > > This store uses a separate directory: > > ``` > storage/framework/cache/data/tw-merge > > ``` > > > > This ensures: > > - Tailwind Merge cache entries are isolated from your application's main cache > - Your default cache store remains clean and easier to debug > - Better performance compared to database-based caching > > You can still override this behavior by explicitly setting another store or using `null` to fallback to Laravel's default cache store. ### Custom cache store [](#custom-cache-store) If you want full control, you can define your own cache store in `config/cache.php` and reference it here. --- `Laravel TailwindMerge` is an open-sourced software licensed under the **[MPL-2.0](https://opensource.org/licenses/MPL-2.0)**. ### Health Score 36 — LowBetter than 79% of packages Maintenance88 Actively maintained with recent releases Popularity7 Limited adoption so far Community13 Small or concentrated contributor base Maturity34 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~2 days Total 3 Last Release 98d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/43579076?v=4)[kalel1500](/maintainers/kalel1500)[@kalel1500](https://github.com/kalel1500) --- Top Contributors [![kalel1500](https://avatars.githubusercontent.com/u/43579076?v=4)](https://github.com/kalel1500 "kalel1500 (35 commits)") --- Tags phplaravelmergeclassestailwindcss ### Code Quality TestsPest Static AnalysisPHPStan, Rector Code StyleLaravel Pint Type Coverage Yes ### Embed Badge ![Health badge](/badges/kalel1500-laravel-tailwind-merge/health.svg) ``` [![Health](https://phpackages.com/badges/kalel1500-laravel-tailwind-merge/health.svg)](https://phpackages.com/packages/kalel1500-laravel-tailwind-merge) ``` ### Alternatives [gehrisandro/tailwind-merge-laravel TailwindMerge for Laravel merges multiple Tailwind CSS classes by automatically resolving conflicts between them 341790.3k28](/packages/gehrisandro-tailwind-merge-laravel)[gehrisandro/tailwind-merge-php TailwindMerge for PHP merges multiple Tailwind CSS classes by automatically resolving conflicts between them 1391.7M12](/packages/gehrisandro-tailwind-merge-php)[yieldstudio/tailwind-merge-php Merge Tailwind CSS classes without style conflicts 4974.6k1](/packages/yieldstudio-tailwind-merge-php)[tales-from-a-dev/tailwind-merge-php TailwindMerge for PHP merges multiple Tailwind CSS classes by automatically resolving conflicts between them 12312.6k9](/packages/tales-from-a-dev-tailwind-merge-php)[markwalet/nova-modal-response A Laravel Nova asset for Modal responses on an action. 17818.7k](/packages/markwalet-nova-modal-response)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 119.2k](/packages/tomshaw-electricgrid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)