Consider migrating away from `@apply`

[benjaminleonard]

Adam Wathan considers it a bit of an anti-pattern — and it does cause issues with readability on some of our components. See the button.css and Button.tsx. It can be unclear where something is defined, and prone to clashes and issues with class overrides. Most recently I spotted this in a couple places during the last Tailwind upgrade where subtle class order changes can affect its apparance.

If you agree this is worth doing (@david-crespo and @charliepark) it might be good to do it incrementally. One component at a time rather than a mega-PR with more surface area to break at once.

[david-crespo]

Fine with me. My only concern is that the resulting inline class lists are going to be even less comprehensible.

[benjaminleonard]

Yeah there's two orthogonal things; moving away from apply to more non-apply CSS components, perhaps with more reusable utilities and inlining more CSS.

The latter we'd need to manage for that. Button might be a good one to test with to confirm that this isn't going to just result in class soup.