Tailwind 自定义表单:如何添加自己的颜色(十六进制值)
Posted
技术标签:
【中文标题】Tailwind 自定义表单:如何添加自己的颜色(十六进制值)【英文标题】:Tailwind custom forms: how to add your own color (hex value) 【发布时间】:2021-02-02 22:14:33 【问题描述】:这个网站:https://tailwindcss-custom-forms.netlify.app/给出了这个例子tailwind.config.js
文件:
// tailwind.config.js
module.exports =
theme:
customForms: theme => (
dark:
'input, textarea, multiselect, checkbox, radio':
backgroundColor: theme('colors.gray.900'),
,
select:
backgroundColor: theme('colors.gray.600'),
,
,
sm:
'input, textarea, multiselect, select':
fontSize: theme('fontSize.sm'),
padding: `$theme('spacing.1') $theme('spacing.2')`,
,
select:
paddingRight: `$theme('spacing.4')`,
,
'checkbox, radio':
width: theme('spacing.3'),
height: theme('spacing.3'),
,
)
,
plugins: [
require('@tailwindcss/custom-forms'),
]
它使用colors.gray.600
表示法来设置颜色。但是我需要#f90f39
颜色。如何设置?
【问题讨论】:
【参考方案1】:你需要在tailwind.config.js
:https://tailwindcss.com/docs/customizing-colors#app自定义颜色
【讨论】:
【参考方案2】:使用 Tailwind 的任意值表示法按需为该颜色生成一个类,而不是将其添加到您的主题中
<button class="bg-[#1da1f2] text-white ..."></button>
【讨论】:
以上是关于Tailwind 自定义表单:如何添加自己的颜色(十六进制值)的主要内容,如果未能解决你的问题,请参考以下文章
Tailwind CSS 自定义颜色应用于文本而不是 ReactJS 中的背景