我有这个组件：

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>
  );
};

现在只关注标记的className。当我应用text-dark className时，由于某种原因它不起作用，并且它根本没有出现在我的devtools样式选项卡中。如果我通过labelClassName prop传递text-dark className，它工作得非常好。你能看出破绽吗？
这是我的tailwind配置文件：

/** @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在这两种情况下都能工作，但没有其他类（即使是默认的顺风类）不能工作。
先谢谢你。