Form

Global variables for Form input elements like input, select, and textarea.

Available Variables

Input

:root {
  --rvc-input-color: #4a5568;
  --rvc-input-bg-color: #ffffff;
  --rvc-input-padding-y: 0.375rem;
  --rvc-input-padding-x: 2rem;
}

Icon

:root {
  --rvc-input-icon-color: #cbd5e0;
  --rvc-input-icon-size: 1.25rem;
}

Customization with Tailwind CSS

To customize these global styles, extend your Tailwind configuration:

// tailwind.config.js
export default {
  theme: {
    extend: {
      components: (theme) => ({
        base: {
          '--rvc-input-color': theme('colors.slate.600'),
          '--rvc-input-bg-color': theme('colors.white'),
          '--rvc-input-icon-color': theme('colors.slate.400'),
          '--rvc-input-icon-size': theme('width.5'),
          '--rvc-input-padding-y': theme('padding[1.5]'),
          '--rvc-input-padding-x': theme('padding.8'),
        },
      }),
    },
  },
};