Hello! We’re building a site with Sage 10, and going down the FSE / Gutenberg / block theme route.
One of the key objectives is to give the client more control over content layout (we’ve worked with them for a number of years, and their marketing team has a decent grasp of web concepts). The block editor is working really well with Sage / Tailwind to give them this control, and it’s a pleasure to work with from a dev’s point of view too.
One aspect that I’m a bit stuck on, is how best to give the user control over responsive classes from Tailwind? Of course, they could just add them by hand as 'additional CSS classes`, but I wondered if there was a better, more visual way.
I guess the basic requirements are simply to set responsive behaviour for visibility, padding / margin and font size.
Since Gutenberg doesn’t yet provide native ways of doing this (some issues linked below), I’d recommend looking at building editor plugins that add the specific controls that you need.
There is this approach if you are wanting to use Tailwind classes directly in the editor, but I would suggest trying to build out your own editor functionality that would cover any use-cases where you’d be having a user add Tailwind CSS classes — for example by adding to the InspectorControls on a per-block basis (or just build your own blocks with the settings you’d like).
I’ve ended up going down the route you suggested; building editor functionality and using safelist. Just exploring tying this into tailwind.screens so we can have a solution that just works OOB.