Skip to content

Commit 764fc6f

Browse files
committed
commit to the simpler approach
1 parent 2a147b7 commit 764fc6f

File tree

3 files changed

+12
-72
lines changed

3 files changed

+12
-72
lines changed

README.md

+12-20
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ This addon allows you to merge multiple [Tailwind CSS](https://tailwindcss.com/)
88

99
This addon provides:
1010

11-
- An Antlers modifier for merging the Tailwind CSS classes
11+
- An Antlers modifier for merging the Tailwind CSS classes.
1212
- Installs the [`tailwind-merge-laravel`](https://github.com/gehrisandro/tailwind-merge-laravel) package which provides the merge functionality within the Laravel context.
1313

1414
## Installation
@@ -23,36 +23,28 @@ composer require marcorieser/tailwind-merge-statamic
2323

2424
> Keep in mind: Later applied classes overrule previous ones.
2525
26-
Just apply the modifier to your existing Tailwind CSS classes.
26+
Create your class string as you normally do and apply the modifier which then removes the conflicting classes:
2727
```antlers
28-
<div class="{{ 'w-10 h-10 rounded-full bg-red-500' | tw_merge }}"></div>
29-
```
28+
{{ varable_holding_classes = 'bg-blue-500 w-8' }}
3029
31-
It's possible to pass the classes as a string, as array or a combination of both:
32-
```antlers
33-
{{ 'w-10 h-10 rounded-full bg-red-500' | tw_merge }}
34-
{{ ['w-10', 'h-10', 'rounded-full', 'bg-red-500'] | tw_merge }}
35-
{{ ['w-10', 'h-10', ['rounded-full', 'bg-red-500']] | tw_merge }}
36-
```
30+
<div class="{{ 'w-10 h-10 rounded-full bg-red-500 {varable_holding_classes}' | tw_merge }}"></div>
3731
38-
By default, the modifier uses the `class` variable at the current level of the cascade for merging:
39-
```antlers
40-
{{# these lines are identical #}}
41-
{{ 'w-10 h-10 rounded-full bg-red-500' | tw_merge }}
42-
{{ 'w-10 h-10 rounded-full bg-red-500' | tw_merge('class') }}
32+
{{# output #}}
33+
<div class="w-8 h-10 rounded-full bg-blue-500"></div>
4334
```
4435

45-
You can use different variables by passing its names as parameters to the modifier:
36+
Alternatively, you can pass the names of the variables as params to the modifier and omit them in your class string:
4637
```antlers
47-
{{ 'w-10 h-10 rounded-full bg-red-500' | tw_merge('variable_1', 'variable_2') }}
38+
<div class="{{ 'w-10 h-10 rounded-full bg-red-500' | tw_merge('varable_holding_classes', 'another_variable') }}"></div>
4839
```
4940

50-
If you want, you can disable the behavior of automatically resolving variables from the cascade entirely by passing `false` as parameter and handle everything on your own as seen below.
41+
It is possible to apply the modifier to a string, an array or a combination of both:
5142
```antlers
52-
{{ 'w-10 h-10 rounded-full bg-red-500 {class} {other_classes}' | tw_merge(false) }}
43+
{{ 'w-10 h-10 rounded-full bg-red-500 {variable}' | tw_merge }}
44+
{{ ['w-10', 'h-10', 'rounded-full', 'bg-red-500', '{variable}'] | tw_merge }}
45+
{{ ['w-10', 'h-10', ['rounded-full', 'bg-red-500'], '{variable}'] | tw_merge }}
5346
```
5447

55-
5648
## Documentation
5749
There is currently not more to that addon as written above but the underlying Laravel package is capable of so much more. Please have a look at its [GitHub Repo](https://github.com/gehrisandro/tailwind-merge-laravel).
5850

README2.md

-52
This file was deleted.

art/example.png

179 KB
Loading

0 commit comments

Comments
 (0)