Skip to content

Commit 601cbbd

Browse files
committed
update readme
1 parent ccdb1d7 commit 601cbbd

File tree

1 file changed

+36
-8
lines changed

1 file changed

+36
-8
lines changed

README.md

+36-8
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,51 @@
11
# Tailwind Merge Statamic
22

3-
> Tailwind Merge Statamic is a Statamic addon that does something pretty neat.
3+
This addon allows you to merge multiple [Tailwind CSS](https://tailwindcss.com/) classes and automatically resolves conflicts between them.
4+
5+
![](https://raw.githubusercontent.com/marcorieser/tailwind-merge-statamic/main/art/example.png)
46

57
## Features
68

7-
This addon does:
9+
This addon provides:
810

9-
- This
10-
- And this
11-
- And even this
11+
- An Antlers modifier for merging the Tailwind CSS classes
12+
- Installs [`tailwind-merge-laravel`](https://github.com/gehrisandro/tailwind-merge-laravel) for making usage of the features outside of Antlers
1213

13-
## How to Install
14+
## Installation
1415

15-
You can search for this addon in the `Tools > Addons` section of the Statamic control panel and click **install**, or run the following command from your project root:
16+
Run the following command from your project root:
1617

1718
``` bash
1819
composer require marcorieser/tailwind-merge-statamic
1920
```
2021

2122
## How to Use
2223

23-
Here's where you can explain how to use this wonderful addon.
24+
Just apply the modifier to your existing classes. <br>
25+
By default, the modifier uses the value of `class` in the current level of the cascade for merging.
26+
```antlers
27+
<div class="{{ 'w-10 h-10 rounded-full bg-red-500' | tw_merge }}"></div>
28+
```
29+
30+
However, you can use a different variable by passing its name as parameter to the modifier.
31+
```antlers
32+
<div class="{{ 'w-10 h-10 rounded-full bg-red-500' | tw_merge('my_variable_name') }}"></div>
33+
```
34+
35+
Additionally, you can disable the usage of a variable in the cascade completely by passing `false` as parameter. <br>
36+
This allows you to pass the variable directly in the classes string:
37+
```antlers
38+
<div class="{{ 'w-10 h-10 rounded-full bg-red-500 {class}' | tw_merge(false) }}"></div>
39+
```
40+
41+
Or merging arrays of classes:
42+
```antlers
43+
<div class="{{ [ 'w-10', 'h-10', 'rounded-full', 'bg-red-500', class, some_other_variable ] | tw_merge(false) }}"></div>
44+
```
45+
46+
47+
## Documentation
48+
There is currently not more to that addon as written above but the underlying Laravel package is capable of so much more. <br> Please have a look at its [GitHub Repo](https://github.com/gehrisandro/tailwind-merge-laravel).
49+
50+
## Credits
51+
Huge thanks to [Sandro Gehri](https://github.com/gehrisandro) for providing all of these features.

0 commit comments

Comments
 (0)