nui-focus · A focus ready utility.
<template>
<div tabindex="0" class="focus:nui-focus">
<span>Iam a focus ready block. Iam focused!</span>
</div>
</template>
Your can override this class default CSS variables in your main.css file.
@theme {
/* Ring color */
--color-ring: var(--color-muted-300);
}
This is the default CSS for the nui-focus utility.
@utility nui-focus {
@apply outline-none ring-ring ring-1;
@apply relative z-0;
}