Skip to content

Commit

Permalink
add limitations to docs
Browse files Browse the repository at this point in the history
  • Loading branch information
dcastil committed Oct 29, 2023
1 parent a962428 commit 661e855
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 3 deletions.
1 change: 1 addition & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
- [What is it for](./what-is-it-for.md)
- [When and how to use it](./when-and-how-to-use-it.md)
- [Features](./features.md)
- [Limitations](./limitations.md)
- [Configuration](./configuration.md)
- [Recipes](./recipes.md)
- [API reference](./api-reference.md)
Expand Down
2 changes: 1 addition & 1 deletion docs/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,6 @@ const twMerge3 = createTailwindMerge(() => ({ … }), withMagic, withMoreMagic)

Next: [Recipes](./recipes.md)

Previous: [Features](./features.md)
Previous: [Limitations](./limitations.md)

[Back to overview](./README.md)
4 changes: 2 additions & 2 deletions docs/features.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Merging behavior

tailwind-merge is designed to be predictable and intuitive. It follows a set of rules to determine which class wins when there are conflicts. Here is a brief overview of the conflict resolution tailwind-merge can do.
tailwind-merge is built to be intuitive. It follows a set of rules to determine which class wins when there are conflicts. Here is a brief overview of its conflict resolution.

### Last conflicting class wins

Expand Down Expand Up @@ -154,7 +154,7 @@ The initial computations are called lazily on the first call to `twMerge` to pre

---

Next: [Configuration](./configuration.md)
Next: [Limitations](./limitations.md)

Previous: [What is it for](./what-is-it-for.md)

Expand Down
21 changes: 21 additions & 0 deletions docs/limitations.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# Limitations

## Don't use classes that look like Tailwind classes but apply different styles

tailwind-merge applies some heuristics to detect the type of a class even if that particular class does not exist in the default Tailwind config. E.g. the class `text-1000xl` does not exist in Tailwind CSS by default but is treated like a `font-size` class in tailwind-merge because it starts with `text-` followed by an optional number and a T-shirt size, like all the other `font-size` classes.

This behavior has the advantage that you're less likely to need to configure tailwind-merge if you're only changing or extending some scales in your Tailwind config. But it also means that tailwind-merge treats classes that look like Tailwind classes as Tailwind classes although they might not be defined in your Tailwind config.

## You need to use label in arbitrary `background-position` and `background-size` classes

tailwind-merge detects the type of class by parsing the class name. When using a class like `bg-[30%_30%]`, tailwind-merge can't know whether the class is a `background-position` or `background-size` class.

Therefore it is necessary to always prepend arbitrary values of `background-position` classes with the label `position:` as in `bg-[position:30%_30%]`. The same applies to `background-size` classes which need to be prepended with `length:`, `size:` or `percentage:`.

---

Next: [Configuration](./configuration.md)

Previous: [Features](./features.md)

[Back to overview](./README.md)

0 comments on commit 661e855

Please sign in to comment.