Redactor can be run inside an iframe. In this case you can have the content isolated from the current page styles and it allows you to edit the HTML frontend frameworks as is.
<!-- element -->
<textarea id="entry">...</textarea>
<!-- call -->
<script>
let app = Redactor('#entry', {
context: true,
classname: 'content',
css: '/your-dist-path/',
custom: {
js: [{ head: true, src: 'https://cdn.tailwindcss.com' }]
},
layout: {
grid: 'grid'
},
layouts: {
set: true,
'one-column': {
title: 'One column',
grid: 'grid',
pattern: '-'
},
'two-columns': {
title: 'Two columns',
grid: 'grid grid-cols-2 gap-4',
pattern: '-|-'
},
'three-columns': {
title: 'Three columns',
grid: 'grid grid-cols-3 gap-4',
pattern: '-|-|-'
},
'four-columns': {
title: 'Four columns',
grid: 'grid grid-cols-4 gap-4',
pattern: '-|-|-|-'
}
}
});
</script>