87c8817ab0
We puts lots of tailwind classes in the radio_small_cards component. It makes reading the ERB code harder. In the upcoming commits, we will add branching where we would need to duplicate the tailwind classes. To make the code more readable and maintainable, I'm extracting the tailwind classes to a custom class.
12 lines
506 B
CSS
12 lines
506 B
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Custom styles */
|
|
@layer components {
|
|
.radio-small-card {
|
|
@apply flex items-center justify-center rounded-md sm:flex-1 cursor-pointer focus:outline-none;
|
|
@apply ring-1 ring-gray-300 bg-white text-gray-900 hover:bg-gray-50 peer-focus-visible:ring-2 peer-focus-visible:ring-orange-600;
|
|
@apply peer-focus-visible:ring-offset-2 peer-checked:bg-orange-600 peer-checked:text-white peer-checked:hover:bg-orange-700;
|
|
}
|
|
} |