Robuust Components

Appearance

Accessibility ​

Global variables for Accessibility (a11y).

Available Variables ​

Focus ​

css
:root {
  --rvc-base-focus-outline-style: dashed;
  --rvc-base-focus-outline-offset: 0.0625rem;
  --rvc-base-focus-outline-width: 0.0625rem;
  --rvc-base-focus-outline-color: #4f46e5;
}

Customization with Tailwind CSS ​

To customize these accessibility styles, extend your Tailwind configuration:

javascript
// tailwind.config.js
export default {
  theme: {
    extend: {
      components: (theme) => ({
        base: {
          '--rvc-base-focus-outline-style': 'dashed',
          '--rvc-base-focus-outline-offset': '0.0625rem', // 1px
          '--rvc-base-focus-outline-width': '0.0625rem', // 1px
          '--rvc-base-focus-outline-color': theme('colors.indigo.600'),
        },
      }),
    },
  },
};