diff --git a/packages/tailwind-merge/src/index.ts b/packages/tailwind-merge/src/index.ts index 33e82d1..96c0fba 100644 --- a/packages/tailwind-merge/src/index.ts +++ b/packages/tailwind-merge/src/index.ts @@ -23,7 +23,7 @@ export function withFluid(config: Config) { const buildFluidValidator = (defs: Exclude[]): ClassValidator => (val) => { - // TODO: this won't handle values with `/` in them + // TODO: this won't handle values with `/` in them, but TW chokes on those anyway const parts = val.split('/') return ( parts.length === 2 && @@ -40,8 +40,8 @@ export function withFluid(config: Config) { toplevel = false ): [fluidValidator: ClassValidator, ...ClassObject[]] => { // Separate class objects from other defs: - const nonObjDefs: Exclude[] = [] const objDefs: ClassObject[] = [] + const nonObjDefs: Exclude[] = [] // Resolve theme getters first resolveThemeGetters(group).forEach((def) => { @@ -73,7 +73,8 @@ export function withFluid(config: Config) { return mergeConfigs(config, { extend: { - classGroups + classGroups, + ignoredVariants: [(variant) => variant.startsWith('~')] } }) } diff --git a/packages/tailwind-merge/tests/index.test.ts b/packages/tailwind-merge/tests/index.test.ts index f7cb9a6..bf5fbb8 100644 --- a/packages/tailwind-merge/tests/index.test.ts +++ b/packages/tailwind-merge/tests/index.test.ts @@ -75,6 +75,6 @@ it('works with variants', () => { '~text-2xl/3xl sm:~sm:~text-3xl/4xl' ) expect(twMerge('text-base sm:text-lg ~text-2xl/3xl sm:~sm:~text-3xl/4xl')).toBe( - 'sm:text-lg ~text-2xl/3xl sm:~sm:~text-3xl/4xl' // TODO: ideally this should be '~text-2xl/3xl sm:~sm:~text-3xl/4xl' + '~text-2xl/3xl sm:~sm:~text-3xl/4xl' ) }) diff --git a/site/components/Steps/Item.svelte b/site/components/Steps/Item.svelte index 495a9aa..a6b4d41 100644 --- a/site/components/Steps/Item.svelte +++ b/site/components/Steps/Item.svelte @@ -6,7 +6,7 @@ style:counter-increment="step" >
diff --git a/site/components/Tip/Warn.svelte b/site/components/Tip/Warn.svelte index cbf4a7f..be7e875 100644 --- a/site/components/Tip/Warn.svelte +++ b/site/components/Tip/Warn.svelte @@ -1,18 +1,19 @@ -
+
+ + /> +

- - <> - ### Install the package +For best results, include it after any other tailwind-merge plugins: - Install `@fluid-tailwind/tailwind-merge` via npm. - - - ```sh - npm install -D @fluid-tailwind/tailwind-merge - ``` - - - - <> - ### Extend `tailwind-merge` +```js +import { extendTailwindMerge } from 'tailwind-merge' +import { withFluid } from '@fluid-tailwind/tailwind-merge' - For more information, see the [`tailwind-merge` plugin guide](https://github.com/dcastil/tailwind-merge/blob/v2.3.0/docs/configuration.md#using-tailwind-merge-plugins). - - - ```js - import { extendTailwindMerge } from 'tailwind-merge' - import { withFluid } from '@fluid-tailwind/tailwind-merge' +export const twMerge = extendTailwindMerge(/* ... */, withFluid) +``` + +{/* tailwind-merge currently doesn't merge the fluid variants (i.e. `~sm/lg:`, `~@sm/lg:`) correctly. */} - export const twMerge = extendTailwindMerge(withFluid) - ``` - - - \ No newline at end of file