Tailwind 自定义表单：如何添加自己的颜色（十六进制值）答案

【问题标题】：Tailwind custom forms: how to add your own color (hex value)Tailwind 自定义表单：如何添加自己的颜色（十六进制值）
【发布时间】：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 颜色。如何设置？

【问题讨论】：

标签： tailwind-css

【解决方案1】：

你需要在tailwind.config.js:https://tailwindcss.com/docs/customizing-colors#app自定义颜色

【讨论】：

【解决方案2】：

使用 Tailwind 的任意值表示法按需为该颜色生成一个类，而不是将其添加到您的主题中

<button class="bg-[#1da1f2] text-white ..."></button>

【讨论】：