@tailwind base; @tailwind components; @tailwind utilities; .btn { @apply inline-block rounded-md px-3 py-2 text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer text-center; &-primary { @apply bg-primary-600 hover:bg-primary-500 focus-visible:outline-primary-600; } &-dark { @apply bg-primary-900 hover:bg-primary-950 focus-visible:outline-primary-950; } &-gray { @apply bg-gray-400 hover:bg-gray-500 focus-visible:outline-primary-500; } &-attention { @apply bg-[#f43f5e] hover:bg-[#ff0000] focus-visible:outline-[#ff0000]; } &-alert { @apply bg-[#ff0000] hover:bg-[#ff0000] focus-visible:outline-[#ff0000]; } &-fw { @apply w-28; } &[aria-pressed='true'] { @apply outline outline-2 outline-offset-2 outline-primary-600 bg-primary-100 text-primary-950; } }