Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add missing info about where to call config functions to docs #264

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions docs/api-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,9 @@ function extendTailwindMerge(...createConfig: Array<(config: Config) => Config>)

Function to create merge function with custom config which extends the default config. Use this if you use the default Tailwind config and just extend it in some places.

> **Note**
> The function `extendTailwindMerge` computes a large data structure based on the config passed to it. I recommend to call it only once and store the result in a top-level variable instead of calling it inline within another repeatedly called function.

You provide it a `configExtension` object which gets [merged](#mergeconfigs) with the default config.

```ts
Expand Down Expand Up @@ -145,6 +148,9 @@ function createTailwindMerge(

Function to create merge function with custom config. Use this function instead of [`extendTailwindMerge`](#extendtailwindmerge) if you don't need the default config or want more control over the config.

> **Note**
> The function `createTailwindMerge` computes a large data structure based on the config passed to it. I recommend to call it only once and store the result in a top-level variable instead of calling it inline within another repeatedly called function.

You need to provide a function which resolves to the config tailwind-merge should use for the new merge function. You can either extend from the default config or create a new one from scratch.

```ts
Expand Down
6 changes: 6 additions & 0 deletions docs/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,9 @@ const customTwMerge = extendTailwindMerge({
})
```

> **Note**
> The function `extendTailwindMerge` computes a large data structure based on the config passed to it. I recommend to call it only once and store the result in a top-level variable instead of calling it inline within another repeatedly called function.

### Using completely custom tailwind-merge config

If you need to modify the tailwind-merge config and need more control than [`extendTailwindMerge`](./api-reference.md#extendtailwindmerge) gives you or don't want to use the default config (and tree-shake it out of your bundle), you can use [`createTailwindMerge`](./api-reference.md#createtailwindmerge).
Expand All @@ -213,6 +216,9 @@ const customTwMerge = createTailwindMerge(() => ({
}))
```

> **Note**
> The function `createTailwindMerge` computes a large data structure based on the config passed to it. I recommend to call it only once and store the result in a top-level variable instead of calling it inline within another repeatedly called function.

The callback passed to `createTailwindMerge` will be called when `customTwMerge` is called the first time, so you don't need to worry about the computations in it affecting app startup performance in case you aren't using tailwind-merge at app startup.

### Using tailwind-merge plugins
Expand Down
6 changes: 6 additions & 0 deletions docs/when-and-how-to-use-it.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@ If you want to merge classes that are all defined within a component, prefer usi
```jsx
// React components with JSX syntax used in this example

import { twJoin } from 'tailwind-merge'

function MyComponent({ forceHover, disabled, isMuted }) {
return (
<div
Expand Down Expand Up @@ -83,6 +85,8 @@ The primary purpose of tailwind-merge is to merge a `className` prop with the de
```jsx
// React components with JSX syntax used in this example

import { twMerge } from 'tailwind-merge'

function MyComponent({ forceHover, disabled, isMuted, className }) {
return (
<div
Expand All @@ -102,6 +106,8 @@ function MyComponent({ forceHover, disabled, isMuted, className }) {

You don't need to worry about potentially expensive re-renders here because tailwind-merge [caches results](./features.md#results-are-cached) so that a re-render with the same props and state becomes computationally lightweight as far as the call to `twMerge` goes.

If you use a custom Tailwind CSS config, don't forget to [configure tailwind-merge](./configuration.md#usage-with-custom-tailwind-config) as well.

## Alternatives

In case the disadvantages of tailwind-merge weigh in too much for your use case, here are some alternatives that might be a better fit.
Expand Down