Tailwind custom forms: how to add your own color (hex value)

Viewed 1819

This site: https://tailwindcss-custom-forms.netlify.app/ gives this example tailwind.config.js file:

// 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'),
  ]
}

it uses colors.gray.600 notation for setting colors. However I need a #f90f39 color. How do I set it?

2 Answers

Use Tailwind’s arbitrary value notation to generate a class for that color on-demand instead of adding it to your theme

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