CSS Styling Doesn't Work

Hello there.

I am relatively new to ReTool and using it to develop a dashboard tool for my company. On the dashboard, customers will need to be able to see data from their machines in a neat, and formatted manner. What I want to do is take a string such as "Hello World." and color the "Hello" red, and the "World" blue. Unfortunately, my few attempts are not working as my CSS/JS isn't even being detected/used for things such as base coloring, or font weight. I am using "!important" as well, but still no effect.

It would also be helpful to be able to do something such as only changing the first word of a string to a certain color if that can be done through CSS.

Any help or resources would be appreciated. It seems that all of the current suggested Google searches seemed to suggest this was asked and solved, but those answers are now deprecated due to the new changes.

Thanks for reading!


Would in-line CSS and HTML work for you?

Not the OP but running into the same problem.

In-line does work but this isn't a good practice, no?

I have .html and .css files prepared for when I wanna host the site outside of Retool in the future.
Since my startup is at an early stage, we use Retool a lot to build prototypes quickly.

I thought I could just use HTML component and copy/paste stuff from my .html/.css files.
Now I have to turn CSS to in-line style in HTML :weary:

Is there a faster way than this?

Hey @mopkaloppt!

Have you explored using an HTML component? It should be able to render most basic HTML and has a separate CSS field:

For more complex HTML/CSS that involves scripts you might also try using a Custom Component: