3 ms·
This sort of class soup brakes the principal of DRY. Much better to use CSS to style. button { --background: teal; --focus-ring: 2px 2p
by runarberg 6y ago
This sort of class soup brakes the principal of DRY. Much better to use CSS to style.
button {
--background: teal;
--focus-ring:
2px 2px 5px skyblue,
-2px -2px 5px skyblue;
background: var(--background);
box-shadow: none;
}
button:hover {
--background: wheat;
}
button:focus-visible,
button:focus:not(:focus-visible) {
outline: none;
}
button:focus-visible {
box-shadow: var(--focus-ring);
}
Now you will never forget to add that `hover:bg-teal-600` class to your buttons.