andredelft/typora-tailwind-theme

The beautiful Tailwind typography layout for Typora.

Tailwind theme for Typora

An implementation of the beautiful Tailwind Typography layout for Typora:

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

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

Installation

1. Go to the Typora theme folder (reachable via the settings menu: Appearance > Open theme folder)
2. Copy the contents of dist/ into this folder.
3. Restart Typora and select either 'Tailwind' or 'Tailwind Dark' 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.

Grayscale

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

:root {
  /* Zinc grayscale */
  --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 grayscale.

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

Font

The default Tailwind font is Inter. A different font-family, as well as general adjustments like font-size and line-height can be defined using the #write selector:

#write {
  font-family: "Crimson Pro";
  font-size: 1.6rem;
  line-height: 1.6;
}

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

If the chosen font is not in proportion to the monospace font (as is the case with Crimson Pro), one can change this balance by adjusting the monospace font-size through the following variables:

#write {
  --code-blocks-font-size: 0.65em;
  --inline-code-font-size: 0.75em;
}

Additionally, the monospace font-family can be customized through the --monospace variable.

Screenshots

Outline

Lists

Other styles

Extensions

Source code mode

typora-tailwind-theme's Issues

How to change the background color of the selected text?

After the text is selected, it cannot be seen clearly in the dark mode.

Style source code mode

Format codeblocks correctly

Font seems to be not as bold as it is in Tailwind. Also, syntax highlighting is still a mess.

Style footnotes

Two-digit index of ordered list is hidden when export to PDF

Thanks for the great theme! I'm reporting this issue that when there're more than 10 items in ordered list and we want to export the Markdown file to PDF, the first digit of the index seem to be hidden.

To reproduce, suppose we create a markdown file like this:

1. a
2. b
3. c
4. d
5. e
6. f
7. g
8. h
9. i
10. j
11. k

It shows perfectly in the editor and the exported HTML. However, when we export it to PDF, we got:

The color of index is blue because I've changed the color theme.

I believe this is related to insufficient width, so I modified the padding-left attribute of ol to 2em, which works as expected as a workaround. I wonder if there's anything better we can do.

😍 awesome！！！！！

awesome！！！！！I love it！😍

1.1.3 lacks tailwind.zip in assets

To be used for download as per release notes.

Style meta block

Suggestion: Improve padding and styling on input box

Improve the padding and styling on the input box as shown below:

Current

With Padding

Word wrap not working inside code block

Hi, i'm having an issue with your theme, that is word wrap is not working inside code block leading to when i export to a PDF file, it's missing the rest inside the code block as below.

Here, it's missing the last part,

While other themes works just fine with this setting of Typora

For example, this is 1 line:

Missing folder from the .zip file?

Hi @andredelft
thank you for creating this theme!

Am I doing something wrong, or the tailwind.zip is missing a folder with fonts?

Go through Typora-specific styles

I have only implemented the basic text styles as of now. This looks good, but there's more work to do to ship this as a proper theme. Cf.: https://github.com/typora/typora-theme-toolkit/tree/master/html-preview/html.

A nice reference for theming: https://support.typora.io/style/.