Description Usage Arguments About Tailwind Tailwind Typography self_contained Option Custom CSS
View source: R/tailwind_prose.R
TailwindCSS with Tailwind Typography in Rmd documents
1 2 3 4 5 6 7 8 9 10 |
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
|
tailwind_config |
Custom tailwind config file.
If |
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 |
... |
Additional arguments passed to |
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/
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
OptionThere are two option for compiling CSS:
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.
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 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.
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.
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.