ButtonGroup #1

styles.app\.css

/* tailwindcss 2.x */
/* @import url("https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"); */

/* custom tailwindcss with children variant */
/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}code{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}button{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{text-transform:none}[type=button],button{-webkit-appearance:button}h1,h2,h3,p{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}button{cursor:pointer}h1,h2,h3{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button{padding:0;line-height:inherit;color:inherit}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px * var(--tw-divide-x-reverse));border-left-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}.bg-red-500{--tw-bg-opacity:1;background-color:rgba(239,68,68,var(--tw-bg-opacity))}.hover\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgba(220,38,38,var(--tw-bg-opacity))}.children\:border-white>*{--tw-border-opacity:1;border-color:rgba(255,255,255,var(--tw-border-opacity))}.children\:border-opacity-25>*{--tw-border-opacity:0.25}.rounded{border-radius:.25rem}.children\:rounded-none>*{border-radius:0}.children\:first\:rounded-l>:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.children\:last\:rounded-r>:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.inline-block{display:inline-block}.flex{display:flex}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-4{padding-left:1rem;padding-right:1rem}*{--tw-shadow:0 0 #0000}*{--tw-ring-inset:var(--tw-empty, );/*!*//*!*/--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59, 130, 246, 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000}.text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.underline{text-decoration:underline}.hover\:no-underline:hover{text-decoration:none}

/* custom css code */
body {
	padding: 1rem; /* p-4 */
}

/* ButtonGroup component */

.ButtonGroup .Button {
  border-radius: 0; /* rounded */
}

.ButtonGroup .Button:first-child {
  border-radius: 0.25rem 0 0 0.25rem; /* rounded-l */
}

.ButtonGroup .Button:last-child {
  border-radius: 0 0.25rem 0.25rem 0; /* rounded-r */
}

.ButtonGroup .Button:not(:first-child) {
  border-left: 1px solid rgba(255, 255, 255, 0.25);  /* border-l border-white border-opacity-25 */
}

templates.application\.hbs

<h1 class="font-bold text-xl mb-4">Button examples</h1>

<div class="mb-4">
  <h2 class="font-bold mb-2">No group</h2>
  <Button>This is a button</Button>
  <Button @url="https://example.com" target="_blank" rel="noopener noreferrer">This is a link</Button>
  <Button @route="index">This is a LinkTo</Button>
</div>

<div>
  <h2 class="font-bold mb-2">With a group</h2>
  <ButtonGroup>
    <Button>This is a button</Button>
    <Button @url="https://example.com" target="_blank" rel="noopener noreferrer">This is a link</Button>
    <Button @route="index">This is a LinkTo</Button>
  </ButtonGroup>
</div>

templates.components.button-group\.hbs

<h3 class="mb-2 font-semibold">Custom CSS <code>.ButtonGroup</code></h3>
<div class="ButtonGroup flex mb-4" ...attributes>
  {{yield}}
</div>

<h3 class="font-semibold">Using Tailwind CSS <code>children</code> variant</h3>
<p class="mb-2 text-sm">
  <a class="underline hover:no-underline" href="https://github.com/benface/tailwindcss-children" target="_blank" rel="noopener noreferrer">https://github.com/benface/tailwindcss-children</a>
</p>
<div class="flex children:rounded-none children:first:rounded-l children:last:rounded-r children:border-white children:border-opacity-25 divide-x" ...attributes>
  {{yield}}
</div>

templates.components.button\.hbs

{{#let "bg-red-500 font-bold inline-block px-4 py-2 rounded text-white hover:bg-red-600" as |class|}}
  {{#if @route}}
    <LinkTo class="Button {{class}}" @route={{@route}} ...attributes>
      {{yield}}
    </LinkTo>
  {{else if @url}}
    <a class="Button {{class}}" href="{{@url}}" ...attributes>
      {{yield}}
    </a>
  {{else}}
    <button class="Button {{class}}" type="button" ...attributes>
      {{yield}}
    </button>
  {{/if}}
{{/let}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": true,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.12.2",
    "ember-template-compiler": "3.12.2",
    "ember-testing": "3.12.2"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}