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

Question

此站点： 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颜色。我该如何设置？

Answer 1

使用 Tailwind\xe2\x80\x99s 任意值表示法按需生成该颜色的类，而不是将其添加到主题中

\n

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

\n

但使用自定义颜色的最佳方法是在主题中定义tailwind.config.js

\n

module.exports = {\n  theme: {\n    colors: {\n      'myColor': '#1da1f2'\n    },\n  },\n}\n

\n

现在在您的项目中随处使用它。

\n

<button class="bg-myColor text-white ..."></button>\n

\n

Answer 2

您需要在以下位置自定义颜色tailwind.config.js：https ://tailwindcss.com/docs/customizing-colors#app