Using Tailwind with BEM

example.html

<button class="button">
  Standard Button
</button>

<button class="button button--red">
  Red Button
</button>

<button class="button button--inline">
  Inline Button
</button>

<button class="button button--inline button--yellow">
  Inline Button (Yellow)
</button>

site.scss

@import "tailwindcss/base";
@use 'sass:map';

$variants: (
    'red': (
        'text': 'white',
        'bg': 'red-dark',
        'border': 'red-dark',
        'hover': (
            'text': 'white',
            'bg': 'red',
            'border': 'red',
        )
    ),
    'yellow': (
        'text': 'black',
        'bg': 'yellow',
        'border': 'yellow',
        'hover': (
            'text': 'black',
            'bg': 'yellow-light',
            'border': 'yellow',
        )
    ),
);

.button {
    @apply flex justify-center w-full rounded-md px-5 py-4 my-6 uppercase text-sm font-bold tracking-widest;
    @apply bg-white text-brand-red-dark border border-brand-red-dark;

    &--inline {
        @apply w-auto;
    }

    &--small {
        @apply text-sm normal-case;
    }

    &:hover,
    &:focus,
    &:active {
        @apply border-brand-red text-brand-red;
    }

    @each $prefix, $colors in $variants {
        $text: map.get($colors, 'text');
        $bg: map.get($colors, 'bg');
        $border: map.get($colors, 'border');
        $hover: map.get($colors, 'hover');

        &--#{$prefix} {
            @apply text-#{$text} bg-#{$bg} border-#{$border};

            &:hover,
            &:focus,
            &:active {
                $text: map.get($hover, 'text');
                $bg: map.get($hover, 'bg');
                $border: map.get($hover, 'border');

                @apply text-#{$text} bg-#{$bg} border-#{$border};
            }
        }
    }
}