SwiftyBug

  export default class CounterComponent extends Component {
    <template>
      <p>0</p>

      <button type="button">+1</button>
      <button type="button">-1</button>
    </template>
  }

    export default component CounterComponent < Component {
        <template>
            <p>0</p>

            <button type="button">+1</button>
            <button type="button">-1</button>
        </template>
    }

  <div class="counter-component">
      <button @click="count++">+</button>
      <span class="count" :data-is-even="count % 2 === 0">{{ count }}</span>
  </div>
  
  <style scoped>
  @reference "tailwindcss"
  
  .counter-component {
      @apply flex items-center gap-2;
  
      button {
          @apply bg-gray-800 text-white;
      }
  
      .count {
          @apply italic text-teal-500;
  
          &[data-is-even="true"] {
              @apply text-rose-500;
          }
      }
  }
  </style>