68 lines
2.1 KiB
Markdown
68 lines
2.1 KiB
Markdown
---
|
|
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](/speaking-at-ember-conf-2020) 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>
|
|
```
|