diff --git a/content/posts/reveal-tailwind.md b/content/posts/reveal-tailwind.md new file mode 100644 index 0000000..cde29db --- /dev/null +++ b/content/posts/reveal-tailwind.md @@ -0,0 +1,68 @@ +--- +title: 'Tailwind + Reveal.js' +date: 2020-03-09 +tags: + - Tech + - CSS + - Tailwind +description: >- + Leverage the power of Tailwind to take full control over your Reveal.js presentations. +--- + +While working on my [Ember Conf 2020 Presentation](/ember-conf-2020-acceptance) 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](https://revealjs.com/) 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](https://tailwindcss.com/) 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](https://tailwindcss.com/docs/installation/) offer many ways to integrate Tailwind, though I opted for a simple cdn include in my presentation's HTML header like so + +```html + +``` + +That's it! Then it's easy to write your presentation with tailwind classes. Happy presenting! + +--- + +## Useful presentation snippets + +### Monospaced Fonts + +```html +
+

library-name

+
+``` + +### Citations + +```html +
+

Content

+ +

+ + Citation + +

+
+``` + +### Columns + +```html +
+

Header

+ +
+
+ Column 1 +
+ +
+ Column 2 +
+
+
+```