From e36f1ab09d04fbf1a6c09b62871f9512db29f7e4 Mon Sep 17 00:00:00 2001
From: Sandro Gehri <sandrogehri@gmail.com>
Date: Wed, 18 Oct 2023 10:32:44 +0200
Subject: [PATCH] Doc: add hint for "withoutTwMergeClasses"

---
 README.md | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 8bd1200..0a0c92e 100644
--- a/README.md
+++ b/README.md
@@ -129,7 +129,7 @@ Now you can use your Blade components and pass additional classes to merge:
 <x-circle class="bg-blue-500" />
 ```
 
-This will now render the following HTML:
+This will render the following HTML:
 
 ```html
 <div class="w-10 h-10 rounded-full bg-blue-500"></div>
@@ -142,7 +142,7 @@ By default Laravel allows you to only merge classes in one place. But with `Tail
 
 ```blade
 // button.blade.php
-<button {{ $attributes->twMerge('p-2 bg-gray-900 text-white') }}>
+<button {{ $attributes->withoutTwMergeClasses()->twMerge('p-2 bg-gray-900 text-white') }}>
     <svg {{ $attributes->twMergeFor('icon', 'h-4 text-gray-500') }} viewBox="0 0 448 512"><path d="..."/></svg>
     
     {{ $slot }}
@@ -158,6 +158,18 @@ You can now specify additional classes for the button and the svg icon:
 </x-button>
 ```
 
+This will render the following HTML:
+
+```html
+<button class="p-2 blue text-white">
+  <svg class="h-4 text-blue-500" viewBox="0 0 448 512"><path d="..."/></svg>
+
+  Click Me
+</button>
+```
+
+> Note: Use `withoutTwMergeClasses()` on your main attributes bag, otherwise all `class:xyz` attributes will be rendered in the output.
+
 ### Use Laravel Blade Directive
 The package registers a Blade directive which can be used to merge classes in your Blade views: