HTML components ignore <h> tags
R
Richard Kirkden
In Task Builder 2, HTML components appear to ignore <h> tags, such as <h1>, rendering all text as if I was using a <p> tag. In F12 Developer Tools > Elements, I can see that all elements with an <h> tag have ‘font-size’ set to 'inherit' and this is traceable to a setting in 'compiled.css', which is commented as 'Remove the default font size and weight for headings.' I’m not sure why this has been done. To make heading sizes render as expected, it is necessary to set them in the CSS fields of the HTML objects, or in the script, using the default sizes, which can be found on the W3Schools site if you search for 'HTML h1 to h6 tag'. Please can you explain the rationale and document the CSS required to restore the default sizes, or remove this setting?
M
Megan Beck
Hi Richard! Thank you for your feedback. We're not planning to remove the setting or document all the default CSS (as you correctly note, resources like W3Schools or MDN already cover that). We do support tailwind 3.x classes. So, for example, using <h1 class="text-xl"> or <h1 class="text-2xl"> will give the styling you’re looking for. The other option is to put all your HTML inside a "container" with the markdown class e.g. <div class="markdown">, this way you will get the default styling we include with our markdown component and that will get you a portion of the way back to normal default.