While working on my Ember Conf 2020 Presentation I found myself in need series of slides. I thought the likely reality was an awkward transition back and forth between the presentation and several code demos I wished to show. Immediately I had flashbacks to awkward college lectures and hoped I could do something better.
That's when I remembered Reveal.js and I was quite excited to see the project was still thriving. Reveal.js offers live website slide backgrounds I could use to load my demos as a slide which I found quite exciting. You're able to leverage any HTML and CSS you desire to build our your slides as well!
Although, how to structure my CSS for the presentation left me uneasy. On one hand I could hack something together since this was just a presentation I was building for myself. Then I remembered the utility-first CSS framework Tailwind which would let me focus on writing content with helper classes to adjust my presentation as I went.
It worked beautifully. The Tailwind installation docs offer many ways to integrate Tailwind, though I opted for a simple cdn include in my presentation's HTML header like so
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">That's it! Then it's easy to write your presentation with tailwind classes. Happy presenting!
Useful presentation snippets
Monospaced Fonts
<section class="font-mono">
<p>library-name</p>
</section>Citations
<section>
<p>Content</p>
<p>
<cite class="text-sm text-gray-400">
Citation
</cite>
</p>
</section>
Columns
<section>
<h2>Header</h2>
<div class="flex">
<div class="w-1/2">
Column 1
</div>
<div class="w-1/2">
Column 2
</div>
</div>
</section>