next.js Tailwind类在作为prop传递时有效,但在直接应用时无效

kokeuurv  于 2023-05-17  发布在  其他
关注(0)|答案(1)|浏览(204)

我有这个组件:

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

68bkxrlz

68bkxrlz1#

确保content file globs包含组件所在的文件。您描述的症状听起来像Tailwind没有扫描文件,因此它不会“看到”类名,因此不会生成您期望的CSS规则。

相关问题