I know I’m responding to my own post, but something that’s been driving me nuts with Elements is how it uses TailwindCSS but completely misses the fact that Tailwind is built on a utility-first concept, which enables you to add pre-defined utility classes and modifiers to any element in order to create custom designs without writing CSS. However, in Elements we have no way of applying these utility classes unless they have been included/exposed in the specific element/component you’re using, or you enter them into the Advanced → Custom CSS Classes text field, (ie. py-8 px-8 max-w-sm mx-auto bg-white).
This approach either requires the duplication of all common properties for every element (including custom elements), or (what we’re seeing) where every element implements only a few properties, and often in different and confusing ways (different labels, location, widget, etc).
I keep coming back to that the base elements, the core building blocks of Elements, should have an inspector similar to that of Sketch, Pages, etc. (if you’re going to be Apple/Mac only, then lean into it) that enable users to add and remove utilities classes and modifiers in much the way we edit, add and remove background colours, strokes, fonts, etc in other applications. All of the base elements share a vast number of properties (margin, padding, colour, background, border, radius, etc - keeping in mind that they often have AND relationships, not OR, ie. multiple backgrounds, borders, etc.) with each other, and other elements such as Grid, Flex, Images, and Video have a few additional properties that are bespoke to them (columns, rows, gap, src, alt, etc).
Taking an approach like this would create a more intuitive, consistent, and useable interface, and allow custom elements to only focus on the things that make them unique.