Tailwind, Modus Themes, and the Blog Theming Workflow

The blog uses three Nikola themes stacked via the parent chain:

sdowney-tailwind → nikola-tailwind-blog → nikola-tailwind-base → base

nikola-tailwind-base provides the Tailwind Play CDN loading, a responsive navbar, a centered content column wrapped in Tailwind's prose class, and CSS for org-mode source blocks (centering, language labels, copy buttons). It has no opinions about fonts or accent colors.

nikola-tailwind-blog adds an indigo accent, post/index/tag templates, and the visual structure of a blog.

sdowney-tailwind is just my personal layer: Google Fonts (Source Sans 3, Open Sans, Source Code Pro), Font Awesome, and the modus-vivendi syntax highlighting CSS.

Each tier is a standard Nikola theme directory under themes/. Nikola finds templates by walking the chain, so I only override what I actually change.

The Tailwind Play CDN is a <script> tag that processes utility classes at runtime:

<script src="https://cdn.tailwindcss.com?plugins=typography"></script>

The Typography plugin provides the prose class, which styles all content elements (headings, paragraphs, lists, blockquotes, code, tables) inside the main content area. For a blog where content comes from org-mode export, this is exactly right—I don't control the HTML org produces, and prose handles it gracefully.

The Tailwind config is inline in a <script> block, defined in my personal base_helper.tmpl:

var heading = ['"Open Sans"', 'Roboto', 'Arial', 'sans-serif'];
tailwind.config = {
    theme: {
        extend: {
            fontFamily: {
                sans: ['"Source Sans 3"'].concat(heading),
                heading: heading,
                mono: ['"Source Code Pro"', 'Inconsolata', 'ui-monospace', 'Courier', 'monospace'],
            },
            typography: {
                DEFAULT: {
                    css: {
                        'h1, h2, h3, h4, h5, h6': {
                            fontFamily: heading.join(', '),
                        },
                    },
                },
            },
        },
    },
};

Font stacks are defined once. The heading array is reused in three places.

Org-mode's HTML exporter produces this structure:

<div class="org-src-container">
  <pre class="src src-cpp">
    <code><span class="org-keyword">template</span> ...</code>
  </pre>
</div>

The src-cpp class carries the language. JavaScript in base.tmpl reads it, maps cpp to "C++", and injects a label in the top-left corner and a copy button in the top-right. Any language works—unknown ones display their raw name.

The CSS positions the container with position: relative, margin: auto, width: fit-content, min-width: 60%, and gives the pre a dark background (--code-bg) with padding. The padding-top: 2.25rem makes room for the label and button.

Org-mode's HTML exporter uses htmlize to apply face colors as CSS classes. When org-html-htmlize-output-type is 'css, it produces <span class"org-keyword">=, <span class"org-type">=, etc. The corresponding CSS must exist in an external stylesheet.

Protesilaos Stavrou's modus-themes provide a structured palette: an alist of (semantic-name . hex-color) pairs. Face definitions reference these palette names. font-lock-keyword-face, for example, maps to magenta-alt-other in modus-vivendi.

secretaire-css.el bridges Emacs and the browser:

1. Load the target theme (e.g., modus-vivendi-tinted)
2. Require deferred major modes so their faces exist
3. Read the palette via (modus-themes-current-palette)
4. For each face, resolve attributes and reverse-map hex → palette name
5. Emit CSS rules using var(--palette-name) references
6. Include only referenced palette entries in the :root block

The result:

:root {
    --bg-main: #0d0e1c;
    --fg-main: #ffffff;
    --magenta-alt-other: #b6a0ff;
    --green: #44bc44;
    /* ... only used entries ... */
}

/* font-lock-keyword-face: magenta-alt-other */
.org-keyword {
    color: var(--magenta-alt-other);
    font-weight: bold;
}

The tailwind-base.css file in the base tier references these variables:

:root {
    --code-bg: var(--bg-main, #1e1e2e);
    --code-fg: var(--fg-main, #cdd6f4);
}

Change the modus variant, regenerate, and code block backgrounds follow.