Tailwind Extended HTML Presentations

Tailwind framework integrates well with Remark slideshow tool. It extends the available css classes and it offers the possibility to create unique styles for markdown presentations.

Whole-presentation formatting can be modified with the tailwind's layer directive applied to the remark-slide-container class:

    @layer components {
      .remark-slide-container {
        @apply text-blue-600 font-semibold;
      }
    }
    

It sets the default text color and font weight for text objects.

Slides

Remark's slide class property accepts many of tailwind's class names. Font size, background color, padding and margins can, for instance, be assigned to the header class slide property:

    class: text-3xl,bg-gray-300,p-6,m-6,text-center
    

Nested divs

Content separators can be nested, each with a different class.

    .pt-2[
    .ring-8[
    .bg-orange-100[
    .p-6[
    .text-3xl[
    tailwind] is awesome.]]]]
    

Scaled and Skewed figures

Figures can be scaled and/or skewed inside a slide:

    .scale-50[
    .skew-y-6[
    ![sky](static/files/sky.png)]]
    

Animation

It's even possible to create simple animating elements:

    .scale-50[
    .animate-bounce[
    ![sky](static/files/Soccer_Ball.png)]
    ]
    

As shown in the video below.