We're trying to find the balance between semantic classes and utilities now with @apply. I've always found layout to be easier with utility classes (regardless of Tailwind, this counts for Bootstrap 4 too).

I like "atom"-like components better with semantic classes. In BEM/ITSS I'd make a component for -everything-. But in Tailwind we'd only make one for common "atoms" such as buttons, tags, inputs etc.

Code example: write ".t-button" and then use @apply to put the classes there. Keeping the design constrained to a set of tokens.

    .t-button {
        @apply border
               inline-flex
               items-center
               px-3
               leading-5
               font-medium
               rounded
               focus_outline-none
               focus_ring-2
               focus_ring-offset-2
               focus_ring-blue-500;
    }