tailwind_prose: TailwindCSS with Tailwind Typography in Rmd documents

Description Usage Arguments About Tailwind Tailwind Typography self_contained Option Custom CSS

View source: R/tailwind_prose.R

Description

TailwindCSS with Tailwind Typography in Rmd documents

Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
tailwind_prose(
  highlight = "zenburn",
  css = NULL,
  tailwind_config = NULL,
  slim_css = FALSE,
  self_contained = TRUE,
  clean_supporting = TRUE,
  template = NULL,
  ...
)

Arguments

highlight

Syntax highlighting style. Supported styles include "default", "tango", "pygments", "kate", "monochrome", "espresso", "zenburn", "haddock", and "textmate". Pass NULL to prevent syntax highlighting.

css

CSS files to include. See Details for more details on using @apply.

tailwind_config

Custom tailwind config file. If self_contained is true, this is the standard config format described by https://tailwindcss.com/docs/configuration If self_contained is false, then you should use a config for the JIT CDN version following the details in tailwindr::use_tailwind.

slim_css

Whether or not to include entirety of TailwindCSS or not. See Details for more information.

self_contained

Produce a standalone HTML file with no external dependencies, using data URIs to incorporate the contents of linked scripts, stylesheets, images, and videos. Note that if true, this requires Node (npm) to be installed on the system

clean_supporting

Logical. Whether or not to clear supporting files. Default is TRUE.

template

Pandoc template to use for rendering. Pass NULL to use built-in tailwind template (or simply don't pass anything). See example folder in source code for example of using Tailwind CSS in template. Note you should use <article class="prose"> to use Tailwind Typography!

...

Additional arguments passed to rmarkdown::html_document base_format.

About Tailwind

TailwindCSS is a utility-based design framework that makes designing simple. It follows the atomic css framework that says 1 class = 1 task. For example, the py-4 class adds 4rem of padding in the y direction. text-gray-500 sets the text to the color gray-500 which is part of Tailwind's beautiful default color scheme. font-semibold sets the font weight to 600.

For responsive design, you can add prefixes to class names. For example px-2 md:px-4 increases the x-direction padding on medium or larger screens. There are a ton of cool features, for example bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 crates a gradient background from yellow-400 to pink-500 passing via red-500 (see it here: https://tailwindcss.com/docs/background-image#linear-gradients).

For complete documentation, see https://tailwindcss.com/docs/

Tailwind Typography

Uses Tailwind Typography. This is an opinionated css framework that creates beautiful text-based documents that work incredibly well for .Rmd documents. For more information visit https://github.com/tailwindlabs/tailwindcss-typography.

self_contained Option

There are two option for compiling CSS:

  1. self_contained: true Requires Node (npm) to be installed on system. This option will post_process the knitted document and create the custom tailwind css. For example, css classes with the @apply tag will be compiled and tailwind will be loaded.

The parameter slim_css uses PostCSS to only include the css classes that appear in the final html document. This is great for keeping files very small, but bad if you are trying to edit through chrome or firefox for example. I recommend putting slim_css: false into the yaml while developing and slim_css: true when ready to finish.

It is possible to pass a custom tailwind configuration using the standard format (https://tailwindcss.com/docs/configuration). This will be passed to the node script as required.

  1. self_contained: false Does not require node (npm) to be installed. Instead of post_processing the css, instead this option will use Tailwind Just-in-time Compiler which allows css to be generated as needed in the document. This requires internet connection, though. This is great for opening documents and trying out classes with Chrome/Firefox Developer Tools. For more infomration on the Just-in-time feature, see https://beyondco.de/blog/tailwind-jit-compiler-via-cdn.

Tailwind configuration is also possible in this mode. However, it requires a non-standard config file. See tailwindr::use_tailwind for details.

Custom CSS

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.

Example css

For example, we could create a custom button with class btn. And create a blue and red variant

  /* File: style.css */

  .btn {
    @apply font-bold py-2 px-4 rounded;
  }
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white;
  }
  .btn-red {
    @apply bg-red-500 hover:bg-red-700 text-white;
  }

Custom css is possible by passing objects to the css yaml parameter. Importantly, you 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.


kylebutts/tailwindr documentation built on Dec. 21, 2021, 8:46 a.m.