Reveal and Tailwind

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
+<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
+
+```html
+<section class="font-mono">
+  <p>library-name</p>
+</section>
+```
+
+### Citations
+
+```html
+<section>
+  <p>Content</p>
+
+  <p>
+    <cite class="text-sm text-gray-400">
+      Citation
+    </cite>
+  </p>
+</section>
+```
+
+### Columns
+
+```html
+<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>
+```