Rich-text fields are saved as markdown or MDX, so some editor content can't be written to the file exactly as it looks. This page covers the cases where formatting changes or disappears after a save, and how to fix them.
Why is there no Text color button in the toolbar?
The Text color dropdown is part of the default toolbar. If your field sets overrides.toolbar, only the buttons you list are shown, so add "textColor":
If it's still missing, update tinacms and @tinacms/cli to the same, latest version.
Why does a color from my palette not show up?
Tina only applies plain CSS colors: hex (#CC4141), named colors (rebeccapurple), and color functions such as rgb(), hsl(), oklch(), color-mix() or var(--brand, #CC4141).
A textColors entry with anything else in its value, like red; font-weight: bold or url(...), is left out of the dropdown, and the browser console logs Ignoring unsupported colour. Change the value to a plain color.
Why do `**`, `*` or `~~` show up as plain text next to colored text?
This happens when bold, italic or strikethrough starts or ends in the middle of a word that also has color. For example, coloring "believ" in unbelievable saves as:
Markdown treats the < and > of the color tag like punctuation, so the ** beside it no longer counts as bold when the file is loaded again. The editor shows the asterisks as text, and the next save escapes them (\*\*), so the formatting is lost for good.
To avoid it, when a word has color, apply bold, italic and strikethrough to the whole word or not at all. To fix content it has already happened to, open the raw markdown editor, remove the stray \* or \~ characters, and reapply the formatting to whole words.
Why did color disappear from spaces?
Spaces at the start or end of colored text are saved outside the color tag, so that bold and italic around them keep working. Color on spaces alone isn't saved, as there's nothing visible to color.
Why does colored text show as raw `<span>` markup, or lose its color after saving?
The editor, the CLI and the content API all need to support text color. If one of them is older than the others, colored text can load as raw <span> markup, or lose its color on save.
Update tinacms, @tinacms/cli and (for Astro sites) @tinacms/astro to their latest versions, and restart your dev server. If it only happens when editing through TinaCloud, let us know on Discord.
Why isn't my own `<span>` shown as colored text in the editor?
Tina only treats a <span> as text color when its only attribute is a style with a single color, written as a plain value:
<span style={{ color: "#CC4141" }}>text</span>
<span style="color: #CC4141">text</span>
MDX fields accept both and save the first form. Markdown fields save the second.
A span with a class, other styles, or a color from a variable (style={{ color: brandRed }}) is left in the file exactly as written, and can't be changed from the Text color dropdown.
Why does highlighted or colored text lose its styling on my site?
Fields that use the markdown parser save highlight and text color as raw HTML (<mark> and <span>). Renderers that strip raw HTML drop them.
Hugo strips raw HTML by default. Turn it on in your site config:
<TinaMarkdown> and @tinacms/astro render both without any extra setup.
Why did part of a word disappear after I highlighted it?
In a field that uses the markdown parser, highlighting part of a word can drop the highlighted text on save. For example, highlighting "believ" in "unbelievable" saves as unable.
Highlight whole words instead, or use the mdx parser for the field if it needs highlights inside words.
Why did a paragraph with `{` or `}` come back empty?
In MDX, curly braces start a JavaScript expression, so a paragraph like 2 * 3 < 4 {x} can't be read back and loads as an empty paragraph.
Wrap text that needs braces in inline code (`{x}`), or use the markdown parser for fields that don't need embedded components.