From a1417dceef17ea5504c344090e067af79d53c2e4 Mon Sep 17 00:00:00 2001 From: Dany Castillo <31006608+dcastil@users.noreply.github.com> Date: Thu, 22 Jun 2023 20:14:11 +0200 Subject: [PATCH 1/4] add missing info about where to call config functions to API reference --- docs/api-reference.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/api-reference.md b/docs/api-reference.md index 4087a851..ce5eb197 100644 --- a/docs/api-reference.md +++ b/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** +> This function computes a lot of data structures 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** +> This function computes a lot of data structures 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 From fcca3c09bbb9a3d739d024648c7d0d80897f788c Mon Sep 17 00:00:00 2001 From: Dany Castillo <31006608+dcastil@users.noreply.github.com> Date: Thu, 22 Jun 2023 20:18:11 +0200 Subject: [PATCH 2/4] improve note --- docs/api-reference.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api-reference.md b/docs/api-reference.md index ce5eb197..3a2b3b97 100644 --- a/docs/api-reference.md +++ b/docs/api-reference.md @@ -82,7 +82,7 @@ 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** -> This function computes a lot of data structures 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 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. @@ -149,7 +149,7 @@ 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** -> This function computes a lot of data structures 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 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. From e5b95f696f4d1fb8401d897695b6f64f47a75f1b Mon Sep 17 00:00:00 2001 From: Dany Castillo <31006608+dcastil@users.noreply.github.com> Date: Thu, 22 Jun 2023 20:18:24 +0200 Subject: [PATCH 3/4] add notes to configuration docs --- docs/configuration.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/configuration.md b/docs/configuration.md index b453005c..12e7f24a 100644 --- a/docs/configuration.md +++ b/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 From 9d10eb8d982dbdbfca7c8c2b5ae478e1f53d5333 Mon Sep 17 00:00:00 2001 From: Dany Castillo <31006608+dcastil@users.noreply.github.com> Date: Thu, 22 Jun 2023 20:26:00 +0200 Subject: [PATCH 4/4] add info about configuration to "when and how to use it" page in docs --- docs/when-and-how-to-use-it.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/when-and-how-to-use-it.md b/docs/when-and-how-to-use-it.md index a3d3b637..81fb1e45 100644 --- a/docs/when-and-how-to-use-it.md +++ b/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 (