Tailwindcss .btn-group

1 개요

tailwindcss .btn-group

<div class="w-screen h-screen p-8 dark:bg-black">

<div class="btn-group">
  <button>apple</button>
  <button>banana</button>
  <button>cranberry</button>
</div>

<br /><br /><br /><button onclick="document.documentElement.classList.toggle('dark')" class="p-1 border">dark</button></div>
<script src="https://cdn.tailwindcss.com"></script><script>tailwind.config={darkMode:'class'}</script>
<style type="text/tailwindcss">
@layer base {*,::before,::after{@apply dark:text-white border-gray-300 dark:border-gray-600;}}

.btn-group {
  @apply inline-flex;
}
.btn-group > * {
  @apply border-y bg-white px-4 py-2 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700;
}
.btn-group > *:first-child {
  @apply rounded-s-md border;
}
.btn-group > *:last-child {
  @apply rounded-e-md border;
}
</style>

2 같이 보기

• tailwindcss .btn
• tailwindcss .btn-group × .tooltip