Tailwind 类作为 prop 传递时有效，但直接应用时无效

Question

我有这个组件：

export const TextInput = ({
  label,
  wrapperClassName = "",
  inputClassName = "",
  labelClassName = "",
  placeholder = "",
  ...props
}: InputProps & FieldHookConfig<string>) => {
  const [field, meta] = useField(props);

  return (
    <div className={wrapperClassName}>
      <label
        className={`block mb-2 text-lg font-medium text-dark ${labelClassName}`}
        htmlFor={props.id || props.name}
      >
        {label}
      </label>
      <input
        className={`bg-gray-50 border border-primary text-secondary text-md rounded-lg
        focus:ring-primary p-2 ${inputClassName}`}
        placeholder={placeholder}
        {...field}
      />
      {meta.touched && meta.error ? (
        <div className="error">{meta.error}</div>
      ) : null}
    </div>
  );
};

现在仅关注标签的类名。当我应用

text-dark

className 时，它由于某种原因不起作用，并且根本不会出现在我的开发工具样式选项卡中。 如果我通过

text-dark

属性传递

labelClassName

className，它工作得很好。你能找出其中的缺陷吗？

这是我的顺风配置文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      screens: {
        sm: "480px",
        md: "768px",
        lg: "976px",
        xl: "1440px",
      },
      colors: {
        primary: "#FF0000",
        secondary: "#414141",
        dark: "#252525",
        light: "#F9F5EB",
        orange: "#AF0404",
      },
  },
  plugins: [],
};

一个有趣而奇怪的事情是，

text-secondary

在这两种情况下都特别有效，但没有其他类（甚至是默认的顺风类）不起作用。

提前谢谢您。

Answer 1

确保组件所在的文件被

content

文件团 覆盖。您描述的症状听起来像是 Tailwind 没有扫描文件，因此它不会“看到”类名称，因此不会生成您期望的 CSS 规则。

Answer 2

我有同样的问题，但我的内容文件 glob 完全没问题。内容：[“./app//*.{js,jsx,ts,tsx}”,“./components//*.{js,jsx,ts,tsx}”],