How to Use TailwindCSS in Shiny
At Appsilon we believe that a good-looking, well-designed interface is the key to making your Shiny Dashboard a success. <a href="https://tailwindcss.com/" target="_blank" rel="noopener">TailwindCSS</a> is a utility-first CSS framework created by one of the authors of <a href="https://www.refactoringui.com/" target="_blank" rel="noopener">Refactoring UI</a>. As I really enjoyed the book, I decided to give it a shot and try using TailwindCSS in Shiny. The result of that is the <a href="https://ryszard-szymaski.shinyapps.io/bee_colony_losses/" target="_blank" rel="noopener"><i>Bee Colony Losses</i></a> dashboard.
<img class="alignnone size-full wp-image-13203" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b01e09d1a75c457e6a7c4d_Bee-Colony-Losses-With-TailWindCSS.webp" alt="Bee Colony Losses Shiny dashboard built using TailwindCSS" width="1600" height="1263" />
Today you'll learn how to quickly configure TailwindCSS and how it can help you in building better-looking user interfaces in your Shiny dashboards.
<blockquote>Is your Shiny UX design missing something? Follow these <a href="https://appsilon.com/ux-design-of-shiny-apps-7-steps-to-design-dashboards-people-love/" target="_blank" rel="noopener">7 steps to design Shiny dashboards</a>.</blockquote>
Table of Contents:
<ul><li><a href="#config">TailwindCSS Configuration</a></li><li><a href="#usingtwcss">Using TailwindCSS in Shiny</a></li><li><a href="#example">Example</a></li><li><a href="#advantage">Advantages</a></li><li><a href="#downside">Downside</a></li></ul>
<hr />
<h2 id="config">TailwindCSS Configuration for Shiny</h2>
Tailwind provides a <a href="https://tailwindcss.com/docs/installation/play-cdn" target="_blank" rel="noopener">Play CDN script</a>, which allows you to use Tailwind right in your browser - that means no build steps, and no need to install any additional tools such as <a href="https://nodejs.org/en/" target="_blank" rel="noopener">nodejs</a>. To use it in Shiny, you just need to include the script in your UI definition:
<pre>library(shiny)
ui <- div(
tags$script(src = "https://cdn.tailwindcss.com")
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
</pre>
<p style="text-align: center;"><iframe title="YouTube video player" src="https://www.youtube.com/embed/AHQRK53p80I" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
That’s it! Now we can start using TailwindCSS classes to prototype the UI of our dashboard. Keep in mind that the Play CDN script is not recommended for production usage, but in the case of prototyping, it is a good way to quickly get started.
<blockquote>Need a Shiny UI/UX for an enterprise app? Learn how to <a href="https://appsilon.com/shiny-ui-ux-with-short-live-coding-tutorial/" target="_blank" rel="noopener">build Shiny UIs with Appsilon's UI/UX coding tutorial</a>.</blockquote>
<h2 id="usingtwcss">Using TailwindCSS in Shiny</h2>
TailwindCSS differs from other CSS frameworks that you might know e.g. <a href="https://getbootstrap.com/" target="_blank" rel="noopener">Bootstrap</a> or <a href="https://fomantic-ui.com/introduction/getting-started.html" target="_blank" rel="noopener">Fomantic UI</a>. You do not have specific classes for UI components such as buttons or forms. What TailwindCSS offers is a set of utility classes that you combine to create your own designs. This means that two applications built with TailwindCSS are probably not going to look similar (see their Build Anything section on <a href="https://tailwindcss.com/" target="_blank" rel="noopener">their website</a>). Ultimately, it allows you to avoid having a <i>typical Bootstrap look</i> and stand out from other apps in terms of design.
<blockquote>Is your R project looking bland? Learn how to <a href="https://appsilon.com/howto-css-and-shiny/" target="_blank" rel="noopener">leverage CSS to style your Shiny app</a>.</blockquote>
<h3 id="example">Example use of TailwindCSS in Shiny</h3>
Let’s assume that you want to make one of your UI components have rounded corners. Instead of defining your own class specifying the border-radius property, you can just apply the <a href="https://tailwindcss.com/docs/border-radius#rounded-corners" target="_blank" rel="noopener"><i>rounded</i></a> utility class from TailwindCSS. Let’s see it in action with Shiny!
<pre>library(shiny)
ui <- div(
tags$script(src = "https://cdn.tailwindcss.com"),
div(
"I am a rounded box!",
class = "rounded bg-gray-300 w-64 p-2.5 m-2.5"
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
</pre>
As you can see by applying a couple of TailwindCSS classes, we were able to quickly define a component with rounded borders, a background color, a fixed width as well as padding and margins.
<h3 id="advantage">Advantages of using TailwindCSS in Shiny</h3>
I know this approach to styling UI might seem weird, but it has its advantages. The utility classes provide you with good defaults - for example, the <a href="https://tailwindcss.com/docs/box-shadow" target="_blank" rel="noopener">box shadow</a> utility offsets your shadows by default, which makes shadows look more natural (<a href="https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886" target="_blank" rel="noopener">see article</a>).
Moreover, TailwindCSS comes with predefined scales, so if you want to add a larger shadow instead of using the shadow-md class, you can use larger equivalents e.g. shadow-lg, shadow-2xl. This narrows down your choices and prevents you from agonizing whether a shadow looks better with a 1px or 2px offset and as a result allows you to design faster. By using a predefined scale, you make your UI more consistent and follow the <a href="https://lawsofux.com/law-of-similarity/" target="_blank" rel="noopener">Law of Similarity</a>.
<blockquote>Looking for Microsoft's Fluent UI in Shiny? <a href="https://appsilon.com/shiny-fluent-intro/" target="_blank" rel="noopener">Appsilon's open source shiny.fluent</a> makes it easy to build professional, modern apps.</blockquote>
<h3 id="downside">Downside of using TailwindCSS in Shiny</h3>
The downside of using TailwindCSS in Shiny is that you might have trouble using base Shiny components such as <i>selectInput </i>and <i>textInput</i>. You might need to reimplement some of the JavaScript-based logic to set up the communication between your custom styled inputs and Shiny.
<h2>TailwindCSS in Shiny - Summary</h2>
You only need one line of code to start playing around with TailwindCSS in your Shiny applications. TailwindCSS provides predefined systems, scales, and good defaults that allow you to quickly design a good-looking and consistent UI.
<blockquote>Is your Shiny dashboard ugly? Watch <a href="https://www.youtube.com/watch?v=MQ7B4y1Y4ew" target="_blank" rel="noopener">Appsilon's crash course in Shiny UI</a>.</blockquote>
By using TailwindCSS you can build a Shiny app that does not look like your <i>typical </i>Shiny app. At the same time, you need to be careful as some of the things that work in base Shiny might not work when combined with TailwindCSS. This means it might require you to reimplement some of the features that are already available in base Shiny.
Tell us how you're using TailwindCSS in your Shiny apps in the comments below, or share your project with us on <a href="http://twitter.com/appsilon" target="_blank" rel="noopener">Twitter</a>.
<hr />
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is TailwindCSS?","acceptedAnswer":{"@type":"Answer","text":"TailwindCSS is a utility-first CSS framework created by one of the authors of Refactoring UI. "}},{"@type":"Question","name":"How to install TailwindCSS in Shiny?","acceptedAnswer":{"@type":"Answer","text":"To use it in Shiny, you just need to include the Play CDN script in your UI definition. "}}]}</script><!--FAQPage Code Generated by https://saijogeorge.com/json-ld-schema-generator/faq/-->
