Tailwind

An implementation of the beautifull Tailwind Typography layout for Typora:

A light and dark theme are provided, which use the prose-xl class and slate color scheme. In particular, the themes are equivalent to:

<article class="prose prose-xl prose-slate dark:prose-invert dark:bg-slate-800">
  ...
</article>

NB: This theme is designed and tested on macOS. It should work for Windows/Linux, but that has not been fully tested. This theme does not include styles for Windows “unibody” style, however.

Installation

1. Go to the Typora theme folder (reachable via the settings menu: Appearance > Open theme folder)
2. Copy tailwind.css and tailwind-dark.css into this folder.
3. Restart Typora and select either theme from the ‘Theme’ menu.

Customization

As with any theme, the Tailwind and Tailwind Dark themes can be customized by defining rules in tailwind.user.css and tailwind-dark.user.css respectively. In this particular case, tailwind.user.css will also be imported by the Tailwind Dark theme, such that customizations will be applied uniformly. If one only wants to target the light theme, rules can be defined in tailwind-light.user.css.

Color scheme

The slate color scheme can be modified by overriding the --theme-X variables in tailwind.user.css as follows:

:root {
  /* Zinc color scheme */
  --theme-50: #fafafa;
  --theme-100: #f4f4f5;
  --theme-200: #e4e4e7;
  --theme-300: #d4d4d8;
  --theme-400: #a1a1aa;
  --theme-500: #71717a;
  --theme-600: #52525b;
  --theme-700: #3f3f46;
  --theme-800: #27272a;
  --theme-900: #18181b;
}

Note that both the light and dark theme automatically adjust to this color scheme.

Refer to the Tailwind docs for other color schemes (or define your own).

Font

The default Tailwind font is Inter. Other fonts can be used as follows:

#write {
  font-family: "Crimson Pro";
  font-size: 1.5rem;
}

I personally find that the Tailwind theme works very well with a serif font like Crimson Pro.