Fwiw to the avoid 80%-in-TW / 20%-in-SCSS-or-something-else dichotomy/complexity, we built Truss which brings TW (Tachyons) style abbreviations to the existing "something else" tool chain (Emotion in our case).

So then everything goes through a single system.

https://github.com/homebound-team/truss

> tailwind's and SCSS's VS code integration is pretty amazing

We get that too, by being just vanilla TypeScript, no editor-specific integration necessary. :-D

(I've linked to Truss in another response, so will stop now. :-))