| use_tailwind {shiny.tailwind} | R Documentation |
'TailwindCSS' with Shiny
Description
'TailwindCSS' with Shiny
Usage
use_tailwind(css = NULL, tailwindConfig = NULL)
Arguments
css |
Optional. Path to ".css" file. Can use @apply tags for applying Tailwind classes. See description for more details. |
tailwindConfig |
Optional. Path to ".js" file containing json object
|
Details
'TailwindCSS' is a utility-based design framework that makes designing simple. See details in the README for this package for why this is so great.
However, the complete set of tailwind css classes is massive (~15mb), so you don't want to load all of these. That is where Tailwind's new Just in Time compiling comes in. It will only load the css classes you use, as you use them. So if your shiny app renders ui dynamically, it will load appropriate css whenever the UI is rendered.
Custom css can use the @apply directives that come with tailwind to easily
compile set of classes. See
https://tailwindcss.com/docs/functions-and-directives#apply for
more details. It just has to be passed to the use_tailwind function if you
want to use the @apply directive.
Custom configuration of tailwind is also possible. There are two options
available in use_tailwind. First, if you don't want to use any custom
modules, uses tailwindConfig. An example is in the folder
inst/examples/02-config in the github repository. Note the .js file should
only consist of the creation of the JSON object tailwind.config = {}.
The function will place it in the appropriate script tag.
Value
a list of type shiny.tag with head and script elements needed to
run a tailwind app
Examples
library(shiny)
example_apps <- list.files(system.file("examples", package = "shiny.tailwind"),
full.names = TRUE
)
basename(example_apps)
if (interactive()) runApp(example_apps[1])