Notes on styling a Phoenix-based blog

In my Phoenix app, I have content that’s generated from Markdown files using Nimble Publisher, which in turn uses Earmark to convert Markdown to HTML.

It wouldn’t feel right for the Markdown conversion module to have opinions on styling, so I store post bodies as almost-vanilla HTML, and these inherit the styles I applied app-wide in assets/css/app.css. Layouts and components belonging to the Phoenix app, on the other hand, have Tailwind classes built right into their HTML elements as needed.

Styles defined in assets/css/app.css get rolled into priv/static/assets/app.css with all the processed Tailwind CSS stuff (if you use Tailwind) and served at /assets/app.css by Plug.Static.

The Tailwind @apply directive comes in handy here if you want to think in Tailwind throughout the project, e.g.

pre {
    @apply p-4 bg-sky-50 rounded-lg mb-6 overflow-x-scroll;
}