我有一个自定义的形式,我使用tailwindcss forms库的风格。
我想覆盖默认样式,但找不到位置。我在tailwind.config.cjs文件中定义了几种新颜色,但似乎我必须手动将颜色类添加到所有单独的表单中。
下面是其中一个组件上的覆盖示例:
const radioBtn = (a: SurveyAnswer) => {
return (
<>
<label>
<input
className="form-radio text-lightGreen focus:ring-green"
type="radio"
name="myRadio"
value={a.answer}
onClick={(e) => handleChange((e.target as HTMLInputElement).value)}
onChange={() => {
setDisabledInput("");
return;
}}
/>
<span className="mx-2">{a.answer}</span>
</label>
</>
);
};
字符串
理想情况下,我想说的是,所有的表单输入都应该在tailwind配置文件中使用这个配色方案。
这是我当前的tailwind配置文件。
/** @type {import('tailwindcss').Config} */
// tailwind.config.js
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
screens: {
sm: "375px", //mobile M
md: "768px", //tablet
lg: "1024px", //laptop
xl: "1280px", //laptop L
"2xl": "2560px", //4k
},
backgroundImage: (theme) => ({
"farmer-working": "url('/State-CEDS-Shawn-Uehira-p29.png')",
spectrum:
"linear-gradient(orange, transparent), linear-gradient(to top left, cyan, transparent), linear-gradient(to top right, purple, transparent)",
spectrum2:
"linear-gradient( steelBlue, black, transparent), linear-gradient(to bottom left, cyan, transparent), linear-gradient(to top right, plum, transparent)",
}),
backgroundSize: {
bgBig: "100% 110%",
},
animation: {
"slide-in": "slide-in 0.7s ease-out",
},
keyframes: {
"slide-in": {
"0%": { transform: "translateY(100%)", opacity: 0 },
"100%": { transform: "translateY(0)", opacity: 100 },
},
},
},
colors: {
green: "#1A9432",
lightGreen: "#1FCE1F",
yellowGreen: "#89E21D",
blue: {
lighter: "#COD8ED",
default: "#3276AE",
darker: "#17364F",
},
white: "#FFFFFF",
gray: "#4C4C4C",
red: "#F52020",
},
},
plugins: [require("@tailwindcss/forms")],
mode: "jit",
};
型
感谢您的帮助!
1条答案
按热度按时间fquxozlt1#
根据这个插件的作者的建议,定制样式的方法是只写css
例如,为了覆盖输入焦点样式,你可以在你的css文件中使用这样的东西:
字符串