InlineWysiwyg table CSS when CMS is disabled

I am not sure if this is a bug or a usage issue. I already read Styling custom fields to match the TinaCMS fields and some issues and I think this issue is unrelated.

I am using InlineWysiwyg and when I toggle the CMS to be disabled, the table loses its CSS while all other elements retain the CSS.

Here is a short video - https://www.loom.com/share/44564c83fb5149b4a7417aa7fd71f71a

Thanks for the question @divyenduz! The Wysiwyg is actually mostly unstyled. All of the headings, bulleted lists, quotes, etc are actually styled by your site’s CSS. The only exceptions are Code Blocks and Tables. This is because they more complex interfaces which we need to have extra controls and functionality added to them in edit mode. I suspect the table styling from the wysiwyg wouldn’t work on the actual site (missing class names and whatnot) but @spbyrne can speak on that with more authority.

Thank for for the quick answer @ncphi. What I am interested in the recommended way of using TinaCMS + Wysiwyg table. As a user am I expected to write the table CSS myself? What other components need custom CSS like this?

Yes that’s right. The WYSIWYG does not provide any CSS for your content. This is so your content can be styled however you see fit. The styling of the WYSIWYG content is entirely inherited from your websites style sheets. The only exceptions are tables and code blocks because of their unique editing interfaces. You can use Tina with your own custom CSS or with other styling toolkits like Bootstrap or Tailwind.

1 Like