Feature: edit default configuration

[wilsonlewis]

Would like the ability to edit the default config:

type TvConfig = {
  twMerge?: boolean,
  twMergeConfig?:TwMergeConfig,
  responsiveVariants?: string[] | boolean
}

Mostly just want to turn off twMerge by default

You could do it one of two ways:

import { globalConfig } from 'tailwind-variants'

globalConfig({
  twMerge: false
})

...

or

import { createTV } from 'tailwind-variants'

const tv = createTV({
  twMerge: false
})

const button = tv({
  ...
})

...

[adonaicandido]

Have you found a way to do this?

[mskelton]

You can modify the defaultConfig variable.

import { defaultConfig } from 'tailwind-variants'
defaultConfig.twMerge = false

[adonaicandido]

Awkward API but ok. Thanks a bunch.

[jrgarciadev]

Hey @adonaicandido another way is to create your own instance of tailwind-variants without twMerge

Example:

import {tv as tvBase, TV} from "tailwind-variants";

export const tv: TV = (options, config) =>
  tvBase(options, {
    ...config,
    twMerge: false,
    twMergeConfig: {
      ...config?.twMergeConfig,
    },
 });

// button.tsx
import {tv} from "./your-tv-file.ts"

const button = tv({
  base: "font-medium bg-blue-500 text-white rounded-full active:opacity-80",
  variants: {
    color: {
      primary: "bg-blue-500 text-white",
      secondary: "bg-purple-500 text-white",
    },
    size: {
      sm: "text-sm",
      md: "text-base",
      lg: "px-4 py-3 text-lg",
    },
  },
  compoundVariants: [
    {
      size: ["sm", "md"],
      class: "px-3 py-1",
    },
  ],
  defaultVariants: {
    size: "md",
    color: "primary",
  }
});

[mskelton]

The new createTV function is released and the new config docs are published!

https://www.tailwind-variants.org/docs/config