Merge pull request #264 from dcastil/bugfix/258/add-missing-info-abou…

…t-where-to-call-config-functions

Add missing info about where to call config functions to docs

docs/api-reference.md

@@ -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
@@ -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

docs/configuration.md

@@ -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).
@@ -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

docs/when-and-how-to-use-it.md

@@ -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
@@ -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
@@ -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.