使用类方差权威覆盖 Tailwind 自定义类

Question

我在

global.css

文件中定义了以下变量

@layer base {
  :root {
    --light-white: rgb(255, 255, 224);
    --light-red: rgb(241, 2, 4);
  }
}

tailwind.config.ts

文件中的以下类

const config: Config = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {
      colors: {
        "light-white": "var(--light-white)",
        "light-red": "var(--light-red)",
      },
      borderWidth: {
        lg: "50px",
        "lg-long": "85px",
      },
    },
  },
  plugins: [],
};

以及

div

组件的以下变体

import { cva } from "class-variance-authority";

const customVariants = cva("size-0", {
  variants: {
    size: {
      lg: `border-t-lg
           border-l-lg-long
           border-b-lg`,
    },
    color: {
      red: `border-t-white
           border-l-light-red
           border-b-white`,
    },
  },
});

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

<div className={cn(customVariants({ color, size }))} />

将变体应用到我的组件时，

color

类会覆盖

size

类

输出：

<div class="size-0 border-t-white border-l-light-red border-b-white"></div>

如果我交换

color

和

size

定义位置，

size

类会覆盖

color

类

const customVariants = cva("size-0", {
  variants: {
    color: {
      red: `border-t-white
           border-l-light-red
           border-b-white`,
    },
    size: {
      lg: `border-t-lg
           border-l-lg-long
           border-b-lg`,
    },
  },
});

输出：

<div class="size-0 border-t-lg border-l-lg-long border-b-lg"></div>

如果我将顺风类直接应用于

div

，它就会起作用

<div className="size-0 border-t-lg border-l-lg-long border-b-lg border-t-white border-l-light-red border-b-white" />

如果我从

borderWidth

变体中删除自定义

border-t-lg

类（

border-l-lg-long

、

border-b-lg

和

size

），它也有效。

const flagVariants = cva("size-0", {
  variants: {
    color: {
      red: `border-t-white
           border-l-light-red
           border-b-white`,
    },
    size: {
      lg: `border-t-[50px]
           border-l-[85px]
           border-b-[50px]`,
    },
  },
});

输出：

<div class="size-0 border-t-white border-l-light-red border-b-white border-t-[50px] border-l-[85px] border-b-[50px]"></div> 似乎在使用

class-variance-authority

 和自定义类 tailwind 时认为边框 

color/width

 是相同的属性，它会覆盖一些类并且不会同时应用两者。

在此代码片段中，您可以看到组件应该是什么样子。

*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
}

.bg {
  background-color: black;
  min-height: 200px;
  min-width: 200px;
  display: grid;
  place-items: center;
}

.size-0 {
  width: 0px;
  height: 0px;
}
.border-t-white {
  border-top-color: white;
}
.border-l-light-red {
  border-left-color: red;
}
.border-b-white {
  border-bottom-color: white;
}
.border-t-lg {
  border-top-width: 50px;
}
.border-l-lg-long {
  border-left-width: 85px;
}
.border-b-lg {
  border-bottom-width: 50px;
}

<div class="bg">  
  <div class="size-0 border-t-lg border-l-lg-long border-b-lg border-t-white border-l-light-red border-b-white" ></div>
</div>

我该如何解决这个问题？预先感谢。

Answer 1

您需要

配置 tailwind-merge

 来说明您的自定义 Tailwind 值键

：

// import { extendTailwindMerge } from 'tailwind-merge';

const customTwMerge = extendTailwindMerge({
  extend: {
    theme: {
      colors: ['light-white', 'light-red'],
      borderWidth: ['lg', 'lg-long'],
    },
  },
});

function cn(...inputs) {
  return customTwMerge(clsx(inputs));
}

const customVariants = cva("size-0", {
  variants: {
    size: {
      lg: `border-t-lg
           border-l-lg-long
           border-b-lg`,
    },
    color: {
      red: `border-t-white
           border-l-light-red
           border-b-white`,
    },
  },
});

console.log(cn(customVariants({ color: 'red', size: 'lg' })));

<script>window.exports = {}</script>
<script src="https://unpkg.com/[email protected]/dist/bundle-cjs.js"></script>
<script>window.tailwindMerge = window.exports; window.exports = {}</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clsx.min.js" integrity="sha256-IyETGWkWvmZiU9FWXnbmkk2C5DCbuHfw5EwHxzwy5mU=" crossorigin="anonymous"></script>
<script>
window.require = () => window.clsx;
window.exports = {}
</script>
<script src="https://unpkg.com/[email protected]/dist/index.js"></script>