Discovered that tailwind doesn’t have ::before or ::after so set up this:
<div><span>@text("before", default: "Before")</span>@text("middle", default:"Middle")<span>@text("after", default: "After")</span></div>
It generates: BeforeMiddle After - Notice there is a space after ‘Middle’
Tailwind does support the pseudo selectors for ::before and ::after - have a look at the Pseudo-elements → Before and after documentation for how it works!
Yeah, I finally found the docs here: Before & After
Unfortunately in edit view it’s showing classes in the preview - probably due to the double quotes causing rendering problems - oh well - they recommend using spans anyway. The only drawback is the Before & After show as block elements due to the div nesting in edit view.
Update: by adding flex to middle element, the space disappeared, so I have a solution for edit view as well.