Explanation & Notes

• Schema extension: we extend the table schema to allow the tableAlignment attribute so CKEditor can store alignment in the model.
• Downcast (model → view): listens to attribute:tableAlignment:table conversion events and sets/removes the appropriate Tailwind classes on the <table> view element. It preserves any other classes that may exist.
• Upcast (view → model): when loading HTML, it inspects the <table> class attribute. If it finds mx-auto, ml-auto or ml-0, it marks the model attribute accordingly.
• UI: three toolbar buttons. Clicking sets/removes the tableAlignment attribute for the selected table. (If nothing is selected it does nothing — you could extend it to insert a table with that alignment.)
• Tailwind class tokens: currently center => 'mx-auto', right => 'ml-auto mr-0', left => 'ml-0 mr-auto'. Change these maps in ALIGN_CLASSES to your preferred classes.
• No commercial plugin required: this is a free solution that works with the OSS CKEditor 5 Table plugin.
• Caveats:
  • The upcast matcher for classes is simple text matching. If you safelist or minimize Tailwind classes differently, adjust detection logic.
  • The downcast replaces alignment class tokens but otherwise preserves other classes on the <table>.

  • 

  • You may want to add a visual state (toggle) for the button to indicate the current alignment — you can bind view.isOn to the current table attribute in the editing view.