I started doing it this way even before I stumbled upon the description of this approach. It speaks for it being a logical way to go, at least for me. I am still working out the possible kinks, figuring out the best system.
What I usually do is set up all my margins and paddings (calling them huge, large, normal, small, and tiny - I can change their values as necessary during production), create a few font sizes (large, normal (this is basically a default p size that can be used for headings for example), small, and tiny), create font colour variants based on the palette for the site I am building, create centering classes (both flex center and text center), create variations of common flex options (alignments, vertical or horizontal, etc), create a couple of different grids if necessary and so on. I do not have a set rules (yet!) so a lot of utility stuff is just added as I go. I am too lazy to sit and create a truly complete system that I could reuse in all my projects but it is necessary and I will certainly work on that in the nearest future.
Obstacles are the fact that you cannot quickly change your elements styles - you need to remove some utility classes from an element, and if you have a number of similar objects with several utility classes and you need to get rid of one from all of them… yeah, not fun.
I would absolutely take this approach again - it can be adjusted from slightly utility-based if your interface is not too complex to 100% utility-based if you need a super-modular structure.
I created my own portfolio site in such a way (but due to its relative simplicity not many utility classes were necessary) and also this delivery service site some time ago which was a bit chaotic in utility rules implementation since I was going back and forth deciding how to do it, and then just finished it and left some inconsistencies as is (this was supposed to be just a prototype anyway). Also all ongoing projects I work on right now share this approach. Can’t link those just yet.