我有这个组件:
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
在这两种情况下都能工作,但没有其他类(即使是默认的顺风类)不能工作。
先谢谢你。
1条答案
按热度按时间68bkxrlz1#
确保
content
file globs包含组件所在的文件。您描述的症状听起来像Tailwind没有扫描文件,因此它不会“看到”类名,因此不会生成您期望的CSS规则。