> At some point, hundreds of utilities later, the code you've written doesn't look pretty. You start wondering what comes next after the utility-first step. How

> At some point, hundreds of utilities later, the code you've written doesn't look pretty. You start wondering what comes next after the utility-first step. How to clean things up? > Turns out there is no next step. Or it kind of exists, but it's called "premature abstraction". You can start extracting classes with @apply, but the documentation for reusing styles [link] describes it as a bad practice. > But what should I use @apply for if not for cleaning up? The documentation does not say. It only tells me why it should not be used. If you jump to the Tailwind section they link to here, the short section immediately before explains with an example you should be using HTML templates to reuse styles over @apply, which is really core to understanding Tailwind: https://tailwindcss.com/docs/reusing-styles#compared-to-css-abstractions https://tailwindcss.com/docs/reusing-styles#compared-to-css-... Unless a component is a single HTML element, the information needed to define it can’t be captured in CSS alone. For anything even remotely complex, the HTML structure is just as important as the CSS. Even if you create classes for the different elements in a component like this, you still have to duplicate the HTML every time you want to use this component. Sure you can update the font-size for every instance in a single place, but what if you need to turn the title into a link? Components and template partials solve this problem much better than CSS-only abstractions because a component can encapsulate the HTML and the styles. Changing the font-size for every instance is just as easy as it is with CSS, but now you can turn all of the titles into links in a single place too. When you create components and template partials like this, there’s no reason to use anything other than utility classes because you already have a single source of truth for the styles.