通过 React 中的函数应用时未生成动态 Tailwind 类的问题

Question

问题：

嗨，我对前端开发相当陌生，尤其是 React 和 JavaScript 框架，如 Next.js 和 Tailwind CSS。我已经开始致力于几个小项目来提高我的理解，其中之一是一个 UI 套件，其中包括按钮、警报、下拉菜单和自动完成字段等组件。

我一直在努力解决的挑战之一是为

DropDownContent

和

AutoCompleteContent

组件实现动态定位。我想将

position

属性传递给这些组件来控制内容 div 的绝对定位（例如，

bottom-center

、

top-right

、

right-middle

等）。此外，我想合并控制内容如何打开和关闭的条件动画类。

该功能有效，但在尝试将逻辑抽象为可重用函数时遇到了麻烦。这是我为动态分配这些类而创建的函数的示例：

export function getShowDynamicAbsolutePosition(
  position: AbsolutePositionProps,
  prefixShow: string,
): string {
  let result: string = prefixShow + "DynamicContentShow";

  if (position === "bottom-center" || position === "top-center") {
    result = prefixShow + "DynamicContentShowCenter";
  } else if (position === "left-middle" || position === "right-middle") {
    result = prefixShow + "DynamicContentShowMiddle";
  }

  return result;
}

例如，这是我在

AutoCompleteContent

组件中使用它的方式：

function getAutoCompleteContentStyle(props: AutoCompleteContentProps): string {
  const radius: string = getRadius(props.radius);
  const shadow: string = getShadow(props.shadow);
  const bgColor: string = getColor(
    false,
    props.color,
    props.variant,
    props.blurProps,
  );
  const position: AbsolutePositionProps = props.position
    ? props.position
    : "bottom-center";
  const showDynamicPosition: string = getShowDynamicAbsolutePosition(
    position,
    "peer-[.focus]:",
  );
  const hideDynamicPosition: string = getHideDynamicAbsolutePosition(
    position,
    "peer-[.notfocus]:",
  );

  return (
    radius +
    " " +
    shadow +
    " " +
    bgColor +
    " " +
    showDynamicPosition +
    " " +
    hideDynamicPosition +
    " " +
    position
  );
}

问题：

当我手动将

showDynamicPosition

值直接包含在

className

中时，如下所示：

className={
  "h-fit absolute p-2 peer-[.focus]:DynamicContentShowCenter peer-[.notfocus]:DynamicContentHiddenCenter " +
  style +
  " " +
  props.className
}

一切都很完美。 Tailwind CSS 类已正确生成，并且动画按预期应用。

但是，当类值来自

getAutoCompleteContentStyle

函数时，Tailwind 不会为这些类生成必要的样式。

浏览器检查器差异：

• 直接包含在

  className

  中时：
  Tailwind 在检查器中生成适当的类：

  .peer.notfocus ~ .peer-\[\.notfocus\]\:DynamicContentHiddenCenter {
      visibility: hidden;
      animation: fadeOutToNoneCenter 0.2s ease-in-out;
  }
  
  .peer.focus ~ .peer-\[\.focus\]\:DynamicContentShowCenter {
      visibility: visible;
      animation: fadeInFromNoneCenter 0.2s ease-in-out;
  }
  

• 来自

  getAutoCompleteContentStyle

  功能时：
  这些类根本没有生成。 Tailwind 不应用任何动态样式，即使在浏览器中检查元素时它们具有相同的类名。

问题：

为什么 Tailwind 在通过

getAutoCompleteContentStyle

函数应用时无法生成必要的动态样式？我该如何解决这个问题，以便 Tailwind 在通过这样的函数应用类时正确生成类？

---

tailwind.config.js：

我的顺风配置可能需要这样：

import type { Config } from "tailwindcss";

const config: Config = {
mode: "jit",
darkMode: "selector",
content: [
  "./app/**/*.{js,ts,jsx,tsx,mdx}",
  "./pages/**/*.{js,ts,jsx,tsx,mdx}",
  "./components/**/*.{js,ts,jsx,tsx,mdx}",
  "./future-ui/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
  extend: {
    colors: {...},
  },
},
plugins: [],
};

export default config;

任何帮助或见解将不胜感激！谢谢！

最初，我认为问题可能与 Tailwind 的即时 (JIT) 模式编译样式的时间有关。我怀疑

className

的应用太晚了，Tailwind 无法检测和编译必要的样式。为了解决这个问题，我尝试优化代码执行，确保更快地分配

className

或与 Tailwind 的编译过程同步。然而，这些努力似乎没有任何效果，问题仍然存在。

Answer 1

Tailwind 不会生成动态类名

在你的情况下它来自一个函数

https://tailwindcss.com/docs/content-configuration#dynamic-class-names