|
1 | 1 | # Tailwind Merge Statamic
|
2 | 2 |
|
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 | + |
4 | 6 |
|
5 | 7 | ## Features
|
6 | 8 |
|
7 |
| -This addon does: |
| 9 | +This addon provides: |
8 | 10 |
|
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 |
12 | 13 |
|
13 |
| -## How to Install |
| 14 | +## Installation |
14 | 15 |
|
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: |
16 | 17 |
|
17 | 18 | ``` bash
|
18 | 19 | composer require marcorieser/tailwind-merge-statamic
|
19 | 20 | ```
|
20 | 21 |
|
21 | 22 | ## How to Use
|
22 | 23 |
|
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