I'm looking for ways to add custom styles to my OutSystems application. Specifically, I want to know how to inject external CSS, such as popular libraries (e.g., Bootstrap, Tailwind), custom libraries (like YummaCSS), or use CSS preprocessors like SASS or LESS.
What’s the best approach to integrate these styles? I would also like to understand if there are any special considerations when using these resources in the OutSystems environment, such as ensuring that styles are applied correctly and handling CSS conflicts. Any guidance or examples on how to set this up would be greatly appreciated!
Additionally, I came across this post: https://www.outsystems.com/forums/discussion/70554/how-to-setting-external-css-file-e-g-fontsawesome/ [How to Setting External CSS File (e.g., FontAwesome)], but it didn’t help me much. I’m particularly confused about how to use a custom ServerAction named 'AddStyleSheetTag' that makes an HTTP request, as opposed to simply using a Client-Side Library Call and adding a library via CDNs like cdnjs, filesystem, jsdelivr, or unpkg.
Thank you in advance for your assistance!
Hey, @Eduardo Moreno
In outsystems if you have to use custom css, offcourse you have to use libraries. So this is the most straightforward method. You can include the CSS files directly from a CDN in your OutSystems application by adding the link tags in the "Header" section of your Web Screen or Layout: htmlCopy code Similarly, you can include other libraries like Tailwind, FontAwesome, or YummaCSS by adding their respective CDN links.
Add the Tailwind CSS link in the Header of your Layout
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
Thank you,
Great answer @Vaishali Bhatt but.. before I add the referente as you are saying
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css
I need to make the injection, otherwise the platform will not recognise. How can I do that?
Example: When you are using C#, you can inject Client Side Libraries or Dependencies directly and then make the referente as you are saying, on the Outsystems Platform is the same?Outsystems doesn't have a Package Manager.
Thank you in advance once again.